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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!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> <input type="text" name="dayInWeek" id="dayInWeek" readonly> <input type="button" id="btnNow" value="Now"> </form> </body> </html> |
Step 2: Create dateui.js file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// 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 »