Datepicker for date of birth input field
Question
I have a registration portal in which I change its view according to my template and now I want to add an input field to add date of birth with date picker how to use script in this registration page to add date picker.
<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>
1 answers
solution1
0 ACCPTED 2015-05-25 11:02:11
You can use Jquery date picker. Look at this https://jqueryui.com/datepicker/
You just need to use
("#inputField").Datepicker()
Place your html anywhere in the form.
The line above should go inside script> tag
Update You need to include jquery files like this in your page's header section
<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">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
which is the best datepicker for birth date?
Loading datepicker in multiple iterations of an input date field
Date of birth input masking not working on Samsug devices
Input Field Disappers When Selecting Date From DatePicker
Bootstrap-datepicker how to put date into input field
Setting the default date on jquery datepicker without populating the underlying input field
to place current date as placeholder initially in the input field datepicker bootstrap
Update Datepicker date via number of days in Input Field?
Custom Input Field on datepicker
Disabling datepicker on an input field
Related Tags