This full code provides to show current date and time.
function getDoubleDigitValue(i) { if (i < 10) { return "0" + i; } return i; }
The above utility function that pre fill with '0' if value is a digit.
function getNumberOfDaysInMonth(monthName) { switch (monthName) { case "Jan": case "Mar": case "May": case "Jul": case "Aug": case "Oct": case "Dec": return 31; break; case "Apr": case "Jun": case "Sep": case "Nov": return 30; break; case "Feb": var today = new Date(); var yearfield = document.getElementById("yearList"); var selectedYear =yearfield. options[yearfield.selectedIndex]. text; var isLeap = new Date(selectedYear,1,29).getDate() == 29; if (isLeap) { return 29; } return 28; break; default: return 10; break; } }
The above javascript function provides getting correct number of days in each month.
var monthtext=['Jan','Feb','Mar','Apr','May','Jun', 'Jul','Aug','Sep','Oct','Nov','Dec']; function populatedropdown(dayfield, monthfield, yearfield, hourfield, minutefield) { var today = new Date(); var dayfield = document.getElementById(dayfield); var monthfield = document.getElementById(monthfield); var yearfield = document.getElementById(yearfield); var hourfield = document.getElementById(hourfield); var minutefield = document.getElementById(minutefield); //Set day var numOfDaysInThisMonth = getNumberOfDaysInMonth( monthtext[today.getMonth()]); for (var i=0; i<numOfDaysInThisMonth; i++) { dayfield.options[i]=new Option(i+1, i+1); } dayfield.options[today.getDate() - 1].selected = true; //Set month for (var m=0; m<12; m++) { monthfield.options[m]=new Option( monthtext[m], monthtext[m]); } monthfield.options[today.getMonth()]=new Option( monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) ; //Set Year var thisyear=today.getFullYear(); for (var y=0; y<20; y++){ yearfield.options[y]=new Option(thisyear, thisyear); thisyear+=1; } yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true); //Set Hour for (var i=0; i<24; i++) { hourfield.options[i]=new Option( getDoubleDigitValue(i), i); } hourfield.options[today.getHours()]=new Option( getDoubleDigitValue( today.getHours()), today.getHours(), true, true) ; //Set minute for (var i=0; i<60; i++) { minutefield.options[i]=new Option(getDoubleDigitValue(i), i); } minutefield.options[today.getMinutes()]=new Option( getDoubleDigitValue( today.getMinutes()), today.getMinutes(), true, true); }
The above javascript function provides current day, month, year, hour and minute values and populates the whole drop down with the current date and time values. And below part is a little jQuery code that provides running of populate function when the page is ready (onload).
$(document).ready(function() { if($("#dayList").length > 0) { populatedropdown("dayList", "monthList", "yearList", "hourList", "minuteList"); } }
The last part is html part.
<select id="dayList"> </select> <select id="monthList"> </select> <select id="yearList"> </select> <select id="hourList"> </select> <select id="minuteList"> </select>