Select Dates Box Generator
Creates 3 drop down select boxes for Month, Day and Year.
Adjusts days for month based upon month and if leap year selected.
Puts in leading '0' for values less than 10.
Script can be put into external file. HTML example provided.
Returned value can be adjusted for mm/dd/yyyy or yyyy-mm-dd
DateSelect.html
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Dates</title>
<script type="text/javascript">
// Put following into external JS file if desired
var DateElements = ['inputYear','inputMonth','inputDay'];
// match names of drop down <select> boxes in HTML
function SBoxSetup(IDS,ArrInfo) {
s = document.getElementById(IDS);
var scnt = s.options.length;
for (var i = scnt-1; i >= 0 ; i--) { s.options[i] = null; }
var tmp = [];
for (i = 0; i < ArrInfo.length; i++ ) {
tmp = ArrInfo[i].split('|');
if (tmp[1] == '') { tmp[1] = tmp[0]; }
s.options[s.options.length] = new Option(tmp[0],tmp[1],false,false);
}
}
var now = new Date();
var yyyy = now.getFullYear(); // current year
var mmmm = now.getMonth(); // current month (0..11)
var dddd = now.getDate(); // current date (1..30)
var iYears = ['2009|', '2008|', '2007|', '2006|', '2005|', '2004|'];
// var iYears = []; for (var i=yyyy-2; i<yyyy+8; i++) { iYears.push(i+'|'); } // alternative setup
var iMonths= ['January|01','February|02','March|03', 'April|04', 'May|05', 'June|06',
'July|07', 'August|08', 'September|09','October|10','November|11','December|12'];
var iDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
function SBoxSetupDays(IDS) {
s = document.getElementById(IDS);
var scnt = s.options.length;
for (var i = scnt-1; i >= 0 ; i--) { s.options[i] = null; }
var daysInMonth = iDays[mmmm];
if ((yyyy % 4 == 0) && (mmmm == 1)) { daysInMonth++; } // leap year check
var d = 0;
for (i = 1; i <= daysInMonth; i++ ) {
d = i<10?'0'+i:i;
s.options[s.options.length] = new Option(d,d,false,false);
}
}
function DateUpdate() {
yyyy = Number(document.getElementById(DateElements[0]).value);
mmmm = Number(document.getElementById(DateElements[1]).value)-1;
dddd = Number(document.getElementById(DateElements[2]).value)-1;
DateInitialize('inputDay');
}
function DateInitialize() {
document.getElementById(DateElements[0]).value = yyyy;
SBoxSetup(DateElements[1],iMonths);
document.getElementById(DateElements[1]).selectedIndex = mmmm;
SBoxSetupDays(DateElements[2]);
document.getElementById(DateElements[2]).selectedIndex = dddd;
};
function DisplayDate() {
var yy = document.getElementById(DateElements[0]).value;
var mm = document.getElementById(DateElements[1]).value;
var dd = document.getElementById(DateElements[2]).value;
// return mm+'/'+dd+'/'+yy; // alternate order
return yy+'-'+mm+'-'+dd; // if desired
}
// Following from: http://www.htmlgoodies.com/beyond/javascript/article.php/3724571
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) { oldonload(); }
func();
}
}
}
addLoadEvent(DateInitialize);
// addLoadEvent(function) { /* more code to run on page load */
// });
</script>
<head>
<body> <!-- onload="DateInitialize()" alternative to addLoadEvent() -->
<form name="myForm" onsubmit="return false">
<select name ="inputMonth" id="inputMonth" onclick="DateUpdate()">
<script type="text/javascript">SBoxSetup('inputMonth',iMonths)</script>
</select>
<select name = "inputDay" id="inputDay" >
<script type="text/javascript">SBoxSetupDays('inputDay')</script>
</select>
<select name ="inputYear" id="inputYear" onclick="DateUpdate()">
<script type="text/javascript">SBoxSetup('inputYear',iYears)</script>
</select>
<!-- for testing purposes only -->
<button onclick="alert(DisplayDate())">Display</button>
</form>
</body>
</html>
Home
Pages: 1
Date drop down selectboxes generation (Read 507 times)
