Hi donboe,
I made this a bit more modular.
You now specify a div with a class of dateDropdown
and fill it with some fallback HTML which will be served to those people with JS disabled:
<div class="dateDropdown">
<label for="dateField1">Please enter the date:</label>
<input id="dateField1" type="text" placeholder="dd.mm.yyyy"/>
</div>
You can have as many of these dateDropdowns as you fancy on your page.
You then include jQuery and my code which is wrapped in this:
DateWidget = { ... }
Then you initialize it and it will add the appropriate dropdowns to all of the aforementioned divs.
DateWidget.init();
It will also initialize each date widget to the current date.
Here’s a demo.
And here’s the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Date widget</title>
<style>div{ margin:15px; }</style>
</head>
<body>
<div class="dateDropdown">
<label for="dateField1">Please enter the date:</label>
<input id="dateField1" type="text" placeholder="dd.mm.yyyy"/>
</div>
<div class="dateDropdown">
<label for="dateField2">Please enter the date:</label>
<input id="dateField2" type="text" placeholder="dd.mm.yyyy"/>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var s,
DateWidget = {
settings: {
months: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'],
day: new Date().getUTCDate(),
currMonth: new Date().getUTCMonth(),
currYear: new Date().getUTCFullYear(),
yearOffset: 21,
containers: $(".dateDropdown")
},
init: function() {
s = this.settings;
DW = this;
s.containers.each(function(){
DW.removeFallback(this);
DW.createSelects(this);
DW.populateSelects(this);
DW.initializeSelects(this);
DW.bindUIActions();
})
},
getDaysInMonth: function(month, year) {
return new Date(year, month, 0).getDate();
},
addDays: function(daySelect, numDays){
$(daySelect).empty();
for(var i = 0; i < numDays; i++){
$("<option />")
.text(i + 1)
.val(i + 1)
.appendTo(daySelect);
}
},
addMonths: function(monthSelect){
for(var i = 0; i < 12; i++){
$("<option />")
.text(s.months[i])
.val(s.months[i])
.appendTo(monthSelect);
}
},
addYears: function(yearSelect){
for(var i = 0; i < s.yearOffset; i++){
$("<option />")
.text(i + s.currYear)
.val(i + s.currYear)
.appendTo(yearSelect);
}
},
removeFallback: function(container) {
$(container).empty();
},
createSelects: function(container) {
$("<select class='day'>").appendTo(container);
$("<select class='month'>").appendTo(container);
$("<select class='year'>").appendTo(container);
},
populateSelects: function(container) {
DW.addDays($(container).find('.day'), DW.getDaysInMonth(s.currMonth, s.currYear));
DW.addMonths($(container).find('.month'));
DW.addYears($(container).find('.year'));
},
initializeSelects: function(container) {
$(container).find('.day').val(s.day);
$(container).find('.currMonth').val(s.month);
$(container).find('.currYear').val(s.year);
},
bindUIActions: function() {
$(".month").on("change", function(){
var daySelect = $(this).prev(),
yearSelect = $(this).next(),
month = s.months.indexOf($(this).val()) + 1,
days = DW.getDaysInMonth(month, yearSelect.val());
DW.addDays(daySelect, days);
});
$(".year").on("change", function(){
var daySelect = $(this).prev().prev(),
monthSelect = $(this).prev(),
month = s.months.indexOf(monthSelect.val()) + 1,
days = DW.getDaysInMonth(month, $(this).val());
DW.addDays(daySelect, days);
});
}
};
DateWidget.init();
</script>
</body>
</html>