出生日期输入字段的日期选择器
Datepicker for date of birth input field
我有一个注册门户，我根据我的模板改变它的视图，现在我想添加一个输入字段来添加出生日期和日期选择器如何在这个注册页面中使用脚本添加日期选择器
<html>
<head>
<title></title>
<link href="catalog/view/theme/default/stylesheet/stylesheet1.css" rel=stylesheet type="text/css" />
<link href="catalog/view/theme/default/stylesheet/register.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/Menu.css" rel="stylesheet" type="text/css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div id="Holder">
<div id="Navbar">
<nav>
<ul>
<li><a href ="http://localhost/1/index.php?route=account/login" style="font-size:17px;">Login</a></li>
<li><a href ="http://localhost/1/index.php?route=account/register" style="font-size:17px;">Register</a></li>
<li><a href ="http://localhost/1/index.php?route=account/forgotten" style="font-size:17px;">Forgot Password</a></li>
</ul>
</nav>
</div>
<?php if ($error_warning) { ?>
<div class="warning"><?php echo $error_warning; ?></div>
<?php } ?>
<?php echo $column_left; ?>
<div id="content"><?php echo $content_top; ?>
<h1><?php echo $heading_title; ?></h1>
<p><?php echo $text_account_already; ?></p>
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data">
<div id="Details">
<div id="YourPersonalDetails">
<h2><?php echo $text_your_details; ?></h2>
<div class="content">
<table class="form">
<tr>
<td><span class="required">*</span> <?php echo $entry_emp_name; ?></td>
<td><input type="text" name="emp_name" value="<?php echo $emp_name; ?>" />
<?php if ($error_emp_name) { ?>
<span class="error"><?php echo $error_emp_name; ?></span>
<?php } ?></td>
</tr>
<tr>
<td><span class="required">*</span> <?php echo $entry_emp_ID; ?></td>
<td><input type="text" name="emp_ID" value="<?php echo $emp_ID; ?>" />
<?php if ($error_emp_ID) { ?>
<span class="error"><?php echo $error_emp_ID; ?></span>
<?php } ?></td>
</tr>
<tr>
<td><span class="required">*</span> Date Of Birth</td>
<td><input type="text" id="datepicker" name="dob" value="<?php echo $dob; ?>" size="12" id="dob" />
<?php if ($error_dob) { ?>
<span class="error">We require your date of birth!</span>
<?php } ?></td>
</tr>
<tr>
<td><span class="required">*</span> <?php echo $entry_email; ?></td>
<td><input type="text" name="email" value="<?php echo $email; ?>" />
<?php if ($error_email) { ?>
<span class="error"><?php echo $error_email; ?></span>
<?php } ?></td>
</tr>
<tr>
<td><span class="required">*</span> <?php echo $entry_mobile_no; ?></td>
<td><input type="text" name="mobile_no" value="<?php echo $mobile_no; ?>" />
<?php if ($error_mobile_no) { ?>
<span class="error"><?php echo $error_mobile_no; ?></span>
<?php } ?></td>
</tr>
</table>
</div>
</div>
<div id="YourAddress" >
<h2><?php echo $text_your_address; ?></h2>
<div class="content">
<table class="form">
<tr>
<td><?php echo $entry_company; ?></td>
<td><input type="text" name="company" value="<?php echo $company; ?>" /></td>
</tr>
<tr style="display: <?php echo (count($customer_groups) > 1 ? 'table-row' : 'none'); ?>;">
<td><?php echo $entry_customer_group; ?></td>
<td><?php foreach ($customer_groups as $customer_group) { ?>
<?php if ($customer_group['customer_group_id'] == $customer_group_id) { ?>
<input type="radio" name="customer_group_id" value="<?php echo $customer_group['customer_group_id']; ?>" id="customer_group_id<?php echo $customer_group['customer_group_id']; ?>" checked="checked" />
<label for="customer_group_id<?php echo $customer_group['customer_group_id']; ?>"><?php echo $customer_group['name']; ?></label>
<br />
<?php } else { ?>
<input type="radio" name="customer_group_id" value="<?php echo $customer_group['customer_group_id']; ?>" id="customer_group_id<?php echo $customer_group['customer_group_id']; ?>" />
<label for="customer_group_id<?php echo $customer_group['customer_group_id']; ?>"><?php echo $customer_group['name']; ?></label>
<br />
<?php } ?>
<?php } ?></td>
</tr>
<tr id="company-id-display">
<td><span id="company-id-required" class="required">*</span> <?php echo $entry_company_id; ?></td>
<td><input type="text" name="company_id" value="<?php echo $company_id; ?>" />
<?php if ($error_company_id) { ?>
<span class="error"><?php echo $error_company_id; ?></span>
<?php } ?></td>
</tr>
<tr>
<td><span class="required">*</span> <?php echo $entry_office_location; ?></td>
<td><input type="text" name="office_location" value="<?php echo $office_location; ?>" />
<?php if ($error_office_location) { ?>
<span class="error"><?php echo $error_office_location; ?></span>
<?php } ?></td>
</tr>
<tr>
<td><?php echo $entry_address_2; ?></td>
<td><input type="text" name="address_2" value="<?php echo $address_2; ?>" /></td>
</tr>
<tr>
<td><span class="required">*</span> <?php echo $entry_city; ?></td>
<td><input type="text" name="city" value="<?php echo $city; ?>" />
<?php if ($error_city) { ?>
<span class="error"><?php echo $error_city; ?></span>
<?php } ?></td>
</tr>
<tr>
<td><span id="postcode-required" class="required">*</span> <?php echo $entry_postcode; ?></td>
<td><input type="text" name="postcode" value="<?php echo $postcode; ?>" />
<?php if ($error_postcode) { ?>
<span class="error"><?php echo $error_postcode; ?></span>
<?php } ?></td>
</tr>
<tr>
<td><span class="required">*</span> <?php echo $entry_country; ?></td>
<td><select name="country_id">
<option value=""><?php echo $text_select; ?></option>
<?php foreach ($countries as $country) { ?>
<?php if ($country['country_id'] == $country_id) { ?>
<option value="<?php echo $country['country_id']; ?>" selected="selected"><?php echo $country['name']; ?></option>
<?php } else { ?>
<option value="<?php echo $country['country_id']; ?>"><?php echo $country['name']; ?></option>
<?php } ?>
<?php } ?>
</select>
<?php if ($error_country) { ?>
<span class="error"><?php echo $error_country; ?></span>
<?php } ?></td>
</tr>
<tr>
<td><span class="required">*</span> <?php echo $entry_zone; ?></td>
<td><select name="zone_id">
<option value=""><?php echo $text_select; ?></option>
<option value="1483">Delhi</option>
<option value="1505">UP</option>
</select>
<?php if ($error_zone) { ?>
<span class="error"><?php echo $error_zone; ?></span>
<?php } ?></td>
</tr>
</table>
</div>
</div>
</div>
<div id="YourPassword">
<h2><?php echo $text_your_password; ?></h2>
<div class="content">
<table class="form">
<tr>
<td><span class="required">*</span> <?php echo $entry_password; ?></td>
<td><input type="password" name="password" value="<?php echo $password; ?>" />
<?php if ($error_password) { ?>
<span class="error"><?php echo $error_password; ?></span>
<?php } ?></td>
</tr>
<tr>
<td><span class="required">*</span> <?php echo $entry_confirm; ?></td>
<td><input type="password" name="confirm" value="<?php echo $confirm; ?>" />
<?php if ($error_confirm) { ?>
<span class="error"><?php echo $error_confirm; ?></span>
<?php } ?></td>
</tr>
</table>
</div>
</div>
<div id="NewsLetter">
<h2><?php echo $text_newsletter; ?></h2>
<div class="content">
<table class="form">
<tr>
<td><?php echo $entry_newsletter; ?></td>
<td><?php if ($newsletter) { ?>
<input type="radio" name="newsletter" value="1" checked="checked" />
<?php echo $text_yes; ?>
<input type="radio" name="newsletter" value="0" />
<?php echo $text_no; ?>
<?php } else { ?>
<input type="radio" name="newsletter" value="1" />
<?php echo $text_yes; ?>
<input type="radio" name="newsletter" value="0" checked="checked" />
<?php echo $text_no; ?>
<?php } ?></td>
</tr>
</table>
</div>
</div>
<?php if ($text_agree) { ?>
<div class="buttons">
<div class="right"><?php echo $text_agree; ?>
<?php if ($agree) { ?>
<input type="checkbox" name="agree" value="1" checked="checked" />
<?php } else { ?>
<input type="checkbox" name="agree" value="1" />
<?php } ?>
<input type="submit" value="<?php echo $button_continue; ?>" class="button" />
</div>
</div>
<?php } else { ?>
<div class="buttons">
<div class="right">
<input type="submit" value="<?php echo $button_continue; ?>" class="button" />
</div>
</div>
<?php } ?>
</form>
<?php echo $content_bottom; ?></div>
<script type="text/javascript"><!--
$('input[name=''customer_group_id'']:checked').live('change', function() {
var customer_group = [];
<?php foreach ($customer_groups as $customer_group) { ?>
customer_group[<?php echo $customer_group['customer_group_id']; ?>] = [];
customer_group[<?php echo $customer_group['customer_group_id']; ?>]['company_id_display'] = '<?php echo $customer_group['company_id_display']; ?>';
customer_group[<?php echo $customer_group['customer_group_id']; ?>]['company_id_required'] = '<?php echo $customer_group['company_id_required']; ?>';
customer_group[<?php echo $customer_group['customer_group_id']; ?>]['tax_id_display'] = '<?php echo $customer_group['tax_id_display']; ?>';
customer_group[<?php echo $customer_group['customer_group_id']; ?>]['tax_id_required'] = '<?php echo $customer_group['tax_id_required']; ?>';
<?php } ?>
if (customer_group[this.value]) {
if (customer_group[this.value]['company_id_display'] == '1') {
$('#company-id-display').show();
} else {
$('#company-id-display').hide();
}
if (customer_group[this.value]['company_id_required'] == '1') {
$('#company-id-required').show();
} else {
$('#company-id-required').hide();
}
if (customer_group[this.value]['tax_id_display'] == '1') {
$('#tax-id-display').show();
} else {
$('#tax-id-display').hide();
}
if (customer_group[this.value]['tax_id_required'] == '1') {
$('#tax-id-required').show();
} else {
$('#tax-id-required').hide();
}
}
});
$('input[name=''customer_group_id'']:checked').trigger('change');
//--></script>
<script type="text/javascript"><!--
$('select[name=''country_id'']').bind('change', function() {
$.ajax({
url: 'index.php?route=account/register/country&country_id=' + this.value,
dataType: 'json',
beforeSend: function() {
$('select[name=''country_id'']').after('<span class="wait"> <img src="catalog/view/theme/default/image/loading.gif" alt="" /></span>');
},
complete: function() {
$('.wait').remove();
},
success: function(json) {
if (json['postcode_required'] == '1') {
$('#postcode-required').show();
} else {
$('#postcode-required').hide();
}
html = '<option value=""><?php echo $text_select; ?></option>';
if (json['zone'] != '') {
for (i = 0; i < json['zone'].length; i++) {
html += '<option value="' + json['zone'][i]['zone_id'] + '"';
if (json['zone'][i]['zone_id'] == '<?php echo $zone_id; ?>') {
html += ' selected="selected"';
}
html += '>' + json['zone'][i]['name'] + '</option>';
}
} else {
html += '<option value="0" selected="selected"><?php echo $text_none; ?></option>';
}
$('select[name=''zone_id'']').html(html);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "'r'n" + xhr.statusText + "'r'n" + xhr.responseText);
}
});
});
$('select[name=''country_id'']').trigger('change');
//--></script>
<script type="text/javascript"><!--
$(document).ready(function() {
$('.colorbox').colorbox({
width: 640,
height: 480
});
});
//--></script>
</div>
</body>
</html>
可以使用Jquery日期选择器。看这个https://jqueryui.com/datepicker/
你只需要使用
("#inputField").Datepicker()
把你的html放在表单的任意位置。
上面这行应该放到script>标签
里面更新你需要在你的页面的标题部分包含这样的jquery文件
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
相关文章：
- jquery日期选择器年份范围默认值
- jquery日期选择器失去了交互性
- 正在搜索JavaScript日期选择器滑块
- 如何在多个jQueryUI日期选择器中屏蔽特定日期
- jquery日期选择器显示与值不同的文本
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- Angular UI启动日期选择器问题
- 奇怪的日期选择器行为，与模糊有关
- 我希望这个日期选择器可以从1990年到2000年之间的年份中选择日期
- keith wood日期选择器日期格式和语言
- 在日期更改后更新Angular UI引导程序日期选择器选项
- Jquery UI日期选择器不关注输入
- Javascript两个日期选择器冲突
- 动态添加的标记不会'无法正确使用日期选择器
- 日期选择器无法使用javascript显示
- AngularJS自定义日期选择器指令
- 他们网站上的代码出现启动日期选择器错误
- 从第一个日期选择器定义第二个日期选择器的开始日期
- 更改日期选择器格式
- 带有推特助推器的日期选择器出现了，但没有't更改日期
