Thursday, December 1, 2011

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.
 <select id="dayList"> </select>
 <select id="monthList"> </select>
 <select id="yearList"> </select>
 <select id="hourList"> </select>
 <select id="minuteList"> </select>

No comments:

Post a Comment