a/19616390/1636522
HTML
<div class="panel">
<div id="start">
<span>Start :</span>
<select></select>
<select></select>
<select></select>
<span></span>
</div>
</div>
<div id="log" class="panel"></div>
CSS
*{font-family:Consolas}
.panel{border:1px solid #ccc;padding:10px;margin-bottom:10px}
JavaScript
var $select = $('select'), // drop down lists
months = getMonths(); // see description below
var start, end; // global vars which host date objects
start = window.start = new Date;
end = window.end = new Date(start.getTime());
end.setHours(end.getHours() + 24);
// Updates the related date object then refreshes the screen.
$select.change(function () {
var id = getId(this),
idx = $select.index(this),
date = window[id],
day, days;
switch (idx % 3) {
case 0: // day
date.setDate($(this).val());
break;
case 2: // year
date.setFullYear($(this).val());
break;
case 1: // month
day = date.getDate(); // saves last selected day
date.setDate(1);
date.setMonth(this.selectedIndex);
days = getDays(date);
if (day <= days) date.setDate(day); // restores last selected day
feedCombo(0, getRange(1, days));
$select.eq(idx - 1).val(date.getDate());
break;
}
refresh(id);
});
// Initializes every drop down lists then refreshes the screen.
(function init(id) {
var date, year, idx;
if (!id) {
init('start');
init('end');
return;
}
date = window[id];
year = date.getFullYear();
idx = { start: 0, end: 3 }[id];
feedCombo(idx, getRange(1, getDays(date)));
feedCombo(idx + 1, getRange(0, 11), months);
feedCombo(idx + 2, getRange(year, year + 10));
$select.eq(idx).val(date.getDate());
$select.eq(idx + 1).val(date.getMonth());
$select.eq(idx + 2).val(year);
refresh(id);
})();
// Helper to populate a drop down list.
function feedCombo(idx, values, labels) {
$select.eq(idx).html(getOptions(values, labels));
}
// Get the number of days of a specific month.
// > getDays(new Date(2013, 1, 1)) // 28/2/2013
// 28
function getDays(date) {
return new Date(
date.getFullYear(), date.getMonth() + 1,...