jQuery UI: Date Picker
Date Picker
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css">
<p>Date:<input id="datepicker" type="text" /></p>
<p>^ Looking to have three input fields here instead of one... so it's:</p>
<br /><br />
<p><input id="day" type="text" placeholder="Day" readonly/>
<input id="month" type="text" placeholder="Month" readonly/>
<input id="year" type="text" placeholder="Year" readonly/></p>
<p>(These will be drop-down fields)</p>
JavaScript
attachDatepickerToFieldById("#day");
attachDatepickerToFieldById("#month");
attachDatepickerToFieldById("#year");
function attachDatepickerToFieldById(id){
$("#datepicker").datepicker({
onSelect: function(date) {
date = date.split(/\//g);
var day = date[1];
var month = date[0];
var year = date[2];
$('#day').val(day);
$('#month').val(month);
$('#year').val(year);
}
});
}