Click here to Skip to main content
15,038,237 members
Articles / Web Development / HTML
Posted 13 Oct 2005


71 bookmarked

JavaScript DatePicker

Rate me:
Please Sign up or sign in to vote.
4.30/5 (21 votes)
24 Feb 2006
The DatePicker is a control for use on the client side of ASP.NET applications.

Sample Image - datepicker.gif


Here is the sample code for a DatePicker in JavaScript. It can be used on HTML pages or as an ASP control - like I use it (see demo files).

Here is the code snippet of the JS code (part of the "render" function):

DatePicker.prototype.render = function()
     var oT1, oTR1, oTD1, oTH1;
     var oT2, oTR2, oTD2;
     this.oSpan = document.getElementById(;
     this.oSpan.appendChild(oT1 = document.createElement("table"));
     oT1.width = "200";
     oT1.border = 1;
     oTR1 = oT1.insertRow(oT1.rows.length);
     oTD1 = oTR1.insertCell(oTR1.cells.length);
     oTD1.colSpan = 7;
     oTD1.className = 'DatePickerHdr';
     oT2 = document.createElement("table");
     oT2.width = "100%";
     oT2.border = 0;
     // New row.
     oTR2 = oT2.insertRow(oT2.rows.length);
     // Previous month.
     oTD2 = oTR2.insertCell(oTR2.cells.length);
     oTD2.title = this.texts.prevMonth;
     oTD2.onclick = function() { this.oDatePicker.onPrev(); }
     oTD2.oDatePicker = this;
     oTD2.innerHTML = "<img src="images/datepicker/prev.gif">";
     oTD2.className = 'DatePickerHdrBtn';
     // Month combo.
     oTD2 = oTR2.insertCell(oTR2.cells.length);
     oTD2.title = this.texts.monthTitle;
     this.oMonth = document.createElement("select");
     this.oMonth.oDatePicker = this;
     this.oMonth.onchange = this.oMonth.onkeyup = 
          function() { this.oDatePicker.onMonth(); }
     for(var i = 0; i < 12; i++)
        this.oMonth.add(new Option(this.texts.months[i], i),undefined);
     this.oMonth.className = 'DatePickerHdrBtn';
     // Year combo.
     oTD2 = oTR2.insertCell(oTR2.cells.length);
     oTD2.title = this.texts.yearTitle;
     this.oYear = document.createElement("select");
     this.oYear.oDatePicker = this;
     this.oYear.onchange = this.oYear.onkeyup = 
          function() { this.oDatePicker.onYear(); }

I did use Russian language and Russian date format because the need of the picker was for a Russian site. But the language and format the picker uses can be changed very simply - just change the array values and the "fill" method:

DatePicker.prototype.fill = function()
     // first clear all
     // place the dates in the calendar
     var nRow = 0;
     var d = new Date(this.dt.getTime());
     var m = d.getMonth();
     for ( d.setDate(1); d.getMonth() == m; 
           d.setTime(d.getTime() + 86400000) ) {
        var nCol = d.getDay();
        if(nCol == 0) nCol = 7;
        nCol = nCol-1;
        this.aCells[nRow][nCol].innerHTML = d.getDate();
        if ( d.getDate() == this.dt.getDate() ) {
           this.aCells[nRow][nCol].className = 
        if ( nCol == 6 ) nRow++;
     // set the month combo
     this.oMonth.value = m;
     // set the year text
     this.oYear.value = this.dt.getFullYear();

That is all. I do really think the control is very useful.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Nikita D. Sinelnikoff
Web Developer
Russian Federation Russian Federation
No Biography provided

Comments and Discussions

Generalnice +5 Pin
Raje_20-Jul-12 1:46
MemberRaje_20-Jul-12 1:46 
GeneralMy vote of 4 Pin
skmm29-Jul-10 8:47
Memberskmm29-Jul-10 8:47 
GeneralMy vote of 3 Pin
Ramanarayanan K8-Jul-10 6:35
MemberRamanarayanan K8-Jul-10 6:35 
GeneralTwo Coordinated Dates Pin
krishna1122-Apr-08 19:55
Memberkrishna1122-Apr-08 19:55 
GeneralEncapsulate this Class inside a Custom Control is done Pin
Stephan Pilz22-Sep-06 3:54
MemberStephan Pilz22-Sep-06 3:54 
Questionabout date control Pin
disak22-Sep-06 19:14
Memberdisak22-Sep-06 19:14 
AnswerRe: about date control Pin
Stephan Pilz24-Sep-06 20:15
MemberStephan Pilz24-Sep-06 20:15 
GeneralRe: about date control Pin
disak24-Sep-06 21:32
Memberdisak24-Sep-06 21:32 
GeneralRe: about date control Pin
Stephan Pilz24-Sep-06 23:03
MemberStephan Pilz24-Sep-06 23:03 
GeneralRe: Encapsulate this Class inside a Custom Control is done Pin
shrirampophali29-Oct-07 21:19
Membershrirampophali29-Oct-07 21:19 
GeneralRe: Encapsulate this Class inside a Custom Control is done Pin
shrirampophali29-Oct-07 21:20
Membershrirampophali29-Oct-07 21:20 
Questionabout javascript Pin
disak22-Sep-06 1:14
Memberdisak22-Sep-06 1:14 
GeneralSomebody is ripping you off Pin
WorkDoggy29-Aug-06 3:16
MemberWorkDoggy29-Aug-06 3:16 
AnswerRe: Somebody is ripping you off Pin
Stephan Pilz7-Sep-06 3:59
MemberStephan Pilz7-Sep-06 3:59 
GeneralRe: Somebody is ripping you off Pin
Guyon A. Roche7-Sep-06 10:41
MemberGuyon A. Roche7-Sep-06 10:41 
AnswerRe: Somebody is ripping you off Pin
WorkDoggy8-Sep-06 1:10
MemberWorkDoggy8-Sep-06 1:10 
GeneralRe: Somebody is ripping you off Pin
Guyon A. Roche8-Sep-06 10:53
MemberGuyon A. Roche8-Sep-06 10:53 
GeneralRe: Somebody is ripping you off Pin
Stephan Pilz8-Sep-06 3:47
MemberStephan Pilz8-Sep-06 3:47 
NewsThe coolest date-time picker is here Pin
kan.izh27-Feb-06 22:20
Memberkan.izh27-Feb-06 22:20 
GeneralRe: The coolest date-time picker Pin
disak22-Sep-06 1:32
Memberdisak22-Sep-06 1:32 
GeneralProvide us please with the proper encoding Pin
JailorSubRuberoid21-Feb-06 2:36
MemberJailorSubRuberoid21-Feb-06 2:36 
AnswerRe: Provide us please with the proper encoding Pin
Nikita D. Sinelnikoff24-Feb-06 1:22
MemberNikita D. Sinelnikoff24-Feb-06 1:22 
GeneralA Bugfix and some little extensions in Code Pin
Stephan Pilz20-Dec-05 20:33
MemberStephan Pilz20-Dec-05 20:33 
GeneralRe: A Bugfix and some little extensions in Code Pin
Guyon A. Roche8-Sep-06 11:16
MemberGuyon A. Roche8-Sep-06 11:16 
GeneralRe: A Bugfix and some little extensions in Code Pin
Stephan Pilz22-Sep-06 3:52
MemberStephan Pilz22-Sep-06 3:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.