The plugin converts any input box to a 3 drop down date picker. It gets the name of the input element and attaches a Day, Month and Year respectively. You can access the original field to retrieve the date which will, by default, be in the format yyyy/mm/dd.
So, for example, if your input fields name was dob, then, to retrieve the value for the day, you would use dobDay. For the month it would be dobMonth and year with dobYear. For all event handlers, you will need to use the new name that will be generated.
Find the example JSFiddle link below.
JSFiddle - jQuery Datepicker
Datepicker Source File
Complete Source, (jquery.datepicker.js)
Below is the minified JS file for the datepicker. Copy this to a JavaScript file and include it in the page.
Minified file, (jquery.datepicker.min.js)
Supported Parameters:
startDate: JavaScript Date object to restrict the user to a specific Start date.
endDate: JavaScript Date object to restrict the user to a specific End date.
dateFormat: a function takes (day, month, year) as parameters and that returns a string that will be used to fill the hidden input box.
Usage:
HTML
<body>
<input type="text" name="dob" id="dob" />
</body>
Javascript Code
$(function () {
$('#dob').datepicker();
// Example: Create 'onChange' handlers.
$('#dobMonth').on('change', function () {
alert($(this).val());
});
// Example: Display the String value on changin the date.
$('#dobDay, #dobMonth, #dobYear').on('change', function () {
alert($('#dob').val());
});
});
No comments :
Post a Comment