Post
Ask Question

Date Picker for Date of Birth

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <script>  
  5.     calendar = {  
  6.         month_names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],  
  7.         weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],  
  8.         month_days: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],  
  9.         //Get today's date - year, month, day and date  
  10.         today: new Date(),  
  11.         opt: {},  
  12.         data: [],  
  13.         //Functions  
  14.         /// Used to create HTML in a optimized way.  
  15.         wrt: function (txt) {  
  16.             this.data.push(txt);  
  17.         },  
  18.         /* Inspired by http://www.quirksmode.org/dom/getstyles.html */  
  19.         getStyle: function (ele, property) {  
  20.             if (ele.currentStyle) {  
  21.                 var alt_property_name = property.replace(/\-(\w)/g, function (m, c) { return c.toUpperCase(); });//background-color becomes backgroundColor  
  22.                 var value = ele.currentStyle[property] || ele.currentStyle[alt_property_name];  
  23.             } else if (window.getComputedStyle) {  
  24.                 property = property.replace(/([A-Z])/g, "-$1").toLowerCase();//backgroundColor becomes background-color  
  25.                 var value = document.defaultView.getComputedStyle(ele, null).getPropertyValue(property);  
  26.             }  
  27.             //Some properties are special cases  
  28.             if (property == "opacity" && ele.filter) value = (parseFloat(ele.filter.match(/opacity\=([^)]*)/)[1]) / 100);  
  29.             else if (property == "width" && isNaN(value)) value = ele.clientWidth || ele.offsetWidth;  
  30.             else if (property == "height" && isNaN(value)) value = ele.clientHeight || ele.offsetHeight;  
  31.             return value;  
  32.         },  
  33.         getPosition: function (ele) {  
  34.             var x = 0;  
  35.             var y = 0;  
  36.             while (ele) {  
  37.                 x += ele.offsetLeft;  
  38.                 y += ele.offsetTop;  
  39.                 ele = ele.offsetParent;  
  40.             }  
  41.             if (navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined") {  
  42.                 x += document.body.leftMargin;  
  43.                 offsetTop += document.body.topMargin;  
  44.             }  
  45.             var xy = new Array(x, y);  
  46.             return xy;  
  47.         },  
  48.         /// Called when the user clicks on a date in the calendar.  
  49.         selectDate: function (year, month, day) {  
  50.             var ths = _calendar_active_instance;  
  51.             if (ths.opt['onDateSelect']) ths.opt['onDateSelect'].apply(ths, [year, month, day]); // Custom handler if the user wants it that way.  
  52.             else {  
  53.                 document.getElementById(ths.opt["input"]).value = year + "-" + month + "-" + day; // Date format is :HARDCODE:  
  54.                 ths.hideCalendar();  
  55.             }  
  56.         },  
  57.         /// Creates a calendar with the date given in the argument as the selected date.  
  58.         makeCalendar: function (year, month, day) {  
  59.             year = parseInt(year);  
  60.             month = parseInt(month);  
  61.             day = parseInt(day);  
  62.             //Display the table  
  63.             var next_month = month + 1;  
  64.             var next_month_year = year;  
  65.             if (next_month >= 12) {  
  66.                 next_month = 0;  
  67.                 next_month_year++;  
  68.             }  
  69.             var previous_month = month - 1;  
  70.             var previous_month_year = year;  
  71.             if (previous_month < 0) {  
  72.                 previous_month = 11;  
  73.                 previous_month_year--;  
  74.             }  
  75.             this.wrt("<table>");  
  76.             this.wrt("<tr><th><a href='javascript:calendar.makeCalendar(" + (previous_month_year) + "," + (previous_month) + ");' title='" + this.month_names[previous_month] + " " + (previous_month_year) + "'><</a></th>");  
  77.             this.wrt("<th colspan='5' class='calendar-title'><select name='calendar-month' class='calendar-month' onChange='calendar.makeCalendar(" + year + ",this.value);'>");  
  78.             for (var i in this.month_names) {  
  79.                 this.wrt("<option value='" + i + "'");  
  80.                 if (i == month) this.wrt(" selected='selected'");  
  81.                 this.wrt(">" + this.month_names[i] + "</option>");  
  82.             }  
  83.             this.wrt("</select>");  
  84.             this.wrt("<select name='calendar-year' class='calendar-year' onChange='calendar.makeCalendar(this.value, " + month + ");'>");  
  85.             var current_year = this.today.getYear();  
  86.             if (current_year < 1900) current_year += 1900;  
  87.             for (var i = current_year - 70; i < current_year + 10; i++) {  
  88.                 this.wrt("<option value='" + i + "'")  
  89.                 if (i == year) this.wrt(" selected='selected'");  
  90.                 this.wrt(">" + i + "</option>");  
  91.             }  
  92.             this.wrt("</select></th>");  
  93.             this.wrt("<th><a href='javascript:calendar.makeCalendar(" + (next_month_year) + "," + (next_month) + ");' title='" + this.month_names[next_month] + " " + (next_month_year) + "'>></a></th></tr>");  
  94.             this.wrt("<tr class='header'>");  
  95.             for (var weekday = 0; weekday < 7; weekday++) this.wrt("<td>" + this.weekdays[weekday] + "</td>");  
  96.             this.wrt("</tr>");  
  97.             //Get the first day of this month  
  98.             var first_day = new Date(year, month, 1);  
  99.             var start_day = first_day.getDay();  
  100.             var d = 1;  
  101.             var flag = 0;  
  102.             //Leap year support  
  103.             if (year % 4 == 0) this.month_days[1] = 29;  
  104.             else this.month_days[1] = 28;  
  105.             var days_in_this_month = this.month_days[month];  
  106.             //Create the calender  
  107.             for (var i = 0; i <= 5; i++) {  
  108.                 if (w >= days_in_this_month) break;  
  109.                 this.wrt("<tr>");  
  110.                 for (var j = 0; j < 7; j++) {  
  111.                     if (d > days_in_this_month) flag = 0; //If the days has overshooted the number of days in this month, stop writing  
  112.                     else if (j >= start_day && !flag) flag = 1;//If the first day of this month has come, start the date writing  
  113.                     if (flag) {  
  114.                         var w = d, mon = month + 1;  
  115.                         if (w < 10) w = "0" + w;  
  116.                         if (mon < 10) mon = "0" + mon;  
  117.                         //Is it today?  
  118.                         var class_name = '';  
  119.                         var yea = this.today.getYear();  
  120.                         if (yea < 1900) yea += 1900;  
  121.                         if (yea == year && this.today.getMonth() == month && this.today.getDate() == d) class_name = " today";  
  122.                         if (day == d) class_name += " selected";  
  123.                         class_name += " " + this.weekdays[j].toLowerCase();  
  124.                         this.wrt("<td class='days" + class_name + "'><a href='javascript:calendar.selectDate(\"" + year + "\",\"" + mon + "\",\"" + w + "\")'>" + w + "</a></td>");  
  125.                         d++;  
  126.                     } else {  
  127.                         this.wrt("<td class='days'> </td>");  
  128.                     }  
  129.                 }  
  130.                 this.wrt("</tr>");  
  131.             }  
  132.             this.wrt("</table>");  
  133.             this.wrt("<input type='button' value='Cancel' class='calendar-cancel' onclick='calendar.hideCalendar();' />");  
  134.             document.getElementById(this.opt['calendar']).innerHTML = this.data.join("");  
  135.             this.data = [];  
  136.         },  
  137.         /// Display the calendar - if a date exists in the input box, that will be selected in the calendar.  
  138.         showCalendar: function () {  
  139.             var input = document.getElementById(this.opt['input']);  
  140.             //Position the div in the correct location...  
  141.             var div = document.getElementById(this.opt['calendar']);  
  142.             if (this.opt['display_element']) var display_element = document.getElementById(this.opt['display_element']);  
  143.             else var display_element = document.getElementById(this.opt['input']);  
  144.             var xy = this.getPosition(display_element);  
  145.             var width = parseInt(this.getStyle(display_element, 'width'));  
  146.             div.style.left = (xy[0] + width + 10) + "px";  
  147.             div.style.top = xy[1] + "px";  
  148.             // Show the calendar with the date in the input as the selected date  
  149.             var existing_date = new Date();  
  150.             var date_in_input = input.value;  
  151.             if (date_in_input) {  
  152.                 var selected_date = false;  
  153.                 var date_parts = date_in_input.split("-");  
  154.                 if (date_parts.length == 3) {  
  155.                     date_parts[1]--; //Month starts with 0  
  156.                     selected_date = new Date(date_parts[0], date_parts[1], date_parts[2]);  
  157.                 }  
  158.                 if (selected_date && !isNaN(selected_date.getYear())) { //Valid date.  
  159.                     existing_date = selected_date;  
  160.                 }  
  161.             }  
  162.             var the_year = existing_date.getYear();  
  163.             if (the_year < 1900) the_year += 1900;  
  164.             this.makeCalendar(the_year, existing_date.getMonth(), existing_date.getDate());  
  165.             document.getElementById(this.opt['calendar']).style.display = "block";  
  166.             _calendar_active_instance = this;  
  167.         },  
  168.         /// Hides the currently show calendar.  
  169.         hideCalendar: function (instance) {  
  170.             var active_calendar_id = "";  
  171.             if (instance) active_calendar_id = instance.opt['calendar'];  
  172.             else active_calendar_id = _calendar_active_instance.opt['calendar'];  
  173.             if (active_calendar_id) document.getElementById(active_calendar_id).style.display = "none";  
  174.             _calendar_active_instance = {};  
  175.         },  
  176.         /// Setup a text input box to be a calendar box.  
  177.         set: function (input_id, opt) {  
  178.             var input = document.getElementById(input_id);  
  179.             if (!input) return; //If the input field is not there, exit.  
  180.             if (opt) this.opt = opt;  
  181.             if (!this.opt['calendar']) this.init();  
  182.             var ths = this;  
  183.             if (this.opt['onclick']) input.onclick = this.opt['onclick'];  
  184.             else {  
  185.                 input.onclick = function () {  
  186.                     ths.opt['input'] = this.id;  
  187.                     ths.showCalendar();  
  188.                 };  
  189.             }  
  190.         },  
  191.         /// Will be called once when the first input is set.  
  192.         init: function () {  
  193.             if (!this.opt['calendar'] || !document.getElementById(this.opt['calendar'])) {  
  194.                 var div = document.createElement('div');  
  195.                 if (!this.opt['calendar']) this.opt['calendar'] = 'calender_div_' + Math.round(Math.random() * 100);  
  196.                 div.setAttribute('id', this.opt['calendar']);  
  197.                 div.className = "calendar-box";  
  198.                 document.getElementsByTagName("body")[0].insertBefore(div, document.getElementsByTagName("body")[0].firstChild);  
  199.             }  
  200.         }  
  201.     }  
  202. </script>  
  203. <style>  
  204. .calendar-box {  
  205. display:none;  
  206. background-color:#fff;  
  207. border:1px solid #444;  
  208. position:absolute;  
  209. width:250px;  
  210. padding: 0 5px;  
  211. }  
  212. .calendar-box select.calendar-month {  
  213. width:90px;  
  214. }  
  215. .calendar-box select.calendar-year {  
  216. width:70px;  
  217. }  
  218. .calendar-box .calendar-cancel {  
  219. width:100%;  
  220. }  
  221. .calendar-box table td {  
  222. width:14%;  
  223. }  
  224. .calendar-box .calendar-title {  
  225. text-align:center;  
  226. }  
  227. .calendar-box a {  
  228. text-decoration:none;  
  229. }  
  230. .calendar-box .today a {  
  231. padding:0 5px;  
  232. margin-left:-5px;  
  233. background-color:#ffe9c6;  
  234. }  
  235. .calendar-box .selected a {  
  236. padding:0 5px;  
  237. margin-left:-5px;  
  238. background-color:#c9ff8b;  
  239. }  
  240. </style>  
  241. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  242. <title>Untitled Document</title>  
  243. </head>  
  244. <body>  
  245. <input type="text" name="date" id="date" />  
  246. <script type="text/javascript">  
  247.     calendar.set("date");  
  248. </script>  
  249. </body>  
  250. </html>