A date selector Archives - Developer Desks

A Date Picker using JavaScript with demo

Notice: A non well formed numeric value encountered in /home/cinemau0/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Here we go to create JavaScript code for A Date Picker Step 1: Create Files date.php

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>A Date Chooser</title>
  <script src="dateui.js"></script>
  <script src="datepicker.js"></script>
</head>
<body>
  <h2>A Date Chooser</h2>
  <form id="theForm">
    Year: <input type="text" name="year" id="year" size="4" maxLength="4">
    Month: <select name="month" id="month">
      <option id="month1" value="1">Jan</option>
      <option id="month2" value="2">Feb</option>
      <option id="month3" value="3">Mar</option>
      <option id="month4" value="4">Apr</option>
      <option id="month5" value="5">May</option>
      <option id="month6" value="6">Jun</option>
      <option id="month7" value="7">Jul</option>
      <option id="month8" value="8">Aug</option>
      <option id="month9" value="9">Sep</option>
      <option id="month10" value="10">Oct</option>
      <option id="month11" value="11">Nov</option>
      <option id="month12" value="12">Dec</option>
    </select>
    Day: <select name="day" id="day"></select>&nbsp;
    <input type="text" name="dayInWeek" id="dayInWeek" readonly>&nbsp;
    <input type="button" id="btnNow" value="Now">
  </form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>A Date Chooser</title>

</head>

<body>

<h2>A Date Chooser</h2>

Year: <input type="text" name="year" id="year" size="4" maxLength="4">

Month: <select name="month" id="month">

</select>

Day: <select name="day" id="day"></select> 

</form>

</body>

</html>

Step 2: Create dateui.js file

// Dateuijs
// Return true if the given year is a leap year
function isLeapYear(year) {
   return ((year % 4) === 0 && ((year % 100) !== 0 || (year % 400) === 0));
}
 
// Return the number of days in the given month (1-12) of the year (xxxx)
function getDaysInMonth(year, month) {
   if (month === 2) {
      if (isLeapYear(year)) {
         return 29;
      } else {
         return 28;
      }
   } else if ((month === 1) || (month === 3) || (month === 5) || (month === 7)
       || (month === 8) || (month === 10) || (month === 12)) {
      return 31;
   } else {
      return 30;
   }
}
 
// Get the day of the week given year, month (1-12) and day (1-31)
function getDayInWeek(year, month, day) {
  var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday",
                  "Thursday", "Friday", "Saturday"];
  var theDate = new Date(year, month-1, day);
  return weekdays[theDate.getDay()];
}

// Dateuijs

// Return true if the given year is a leap year

function isLeapYear(year) {

return ((year % 4) === 0 && ((year % 100) !== 0 || (year % 400) === 0));

}

// Return the number of days in the given month (1-12) of the year (xxxx)

function getDaysInMonth(year, month) {

if (month === 2) {

if (isLeapYear(year)) {

return 29;

} else {

return 28;

}

} else if ((month === 1) || (month === 3) || (month === 5) || (month === 7)

|| (month === 8) || (month === 10) || (month === 12)) {

return 31;

} else {

return 30;

}

// Get the day of the week given year, month (1-12) and day (1-31)

function getDayInWeek(year, month, day) {

var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday",

"Thursday", "Friday", "Saturday"];

var theDate = new Date(year, month-1, day);

return weekdays[theDate.getDay()];

}

Explanation The function isLeapYear(year) returns true if year is a leap year. The function getDaysInMonth(year, month) returns the number of days in the given month (1-12) of the year (4-digit). Take note… Read More »