Javascript current date and time drop downs

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.






Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s