Click here to Skip to main content
Click here to Skip to main content

JavaScript DatePicker

, 24 Feb 2006
Rate this:
Please Sign up or sign in to vote.
The DatePicker is a control for use on the client side of ASP.NET applications.

Sample Image - datepicker.gif

Introduction

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.name);
     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%";
     oTD1.appendChild(oT2);
     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");
     oTD2.appendChild(this.oMonth);
     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");
     oTD2.appendChild(this.oYear);
     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
     this.clear();
     // 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 = 
                             'DatePickerBtnSelect';
        }
        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.

License

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 PinmemberRajesh Biswas20-Jul-12 1:46 
GeneralMy vote of 4 Pinmemberskmm29-Jul-10 8:47 
GeneralMy vote of 3 PinmemberramanarayananAsp8-Jul-10 6:35 
GeneralTwo Coordinated Dates Pinmemberkrishna1122-Apr-08 19:55 
GeneralEncapsulate this Class inside a Custom Control is done PinmemberStephan Pilz22-Sep-06 3:54 
Questionabout date control Pinmemberdisak22-Sep-06 19:14 
AnswerRe: about date control PinmemberStephan Pilz24-Sep-06 20:15 
Hello Disa,
 
Why you don't klick the Link in my Post? Here comes the Link again:
 
http://www.codeproject.com/useritems/DatePickerCustomControl.asp
 
BR
Stephan
 
                   \\\|///
                 \\  - -  //
                  (  @ @  )
+---------------oOOo-(_)-oOOo-----------------+
| Stephan Pilz   stephan.pilz@stephan-pilz.de |
|                <a href=www.stephan-pilz.de>www.stephan-pilz.de</a>          |
|                ICQ#: 127823481              |
+-----------------------Oooo------------------+
                 oooO   (   )
                (   )    ) /
                 \ (    (_/
                  \_)

GeneralRe: about date control Pinmemberdisak24-Sep-06 21:32 
GeneralRe: about date control PinmemberStephan Pilz24-Sep-06 23:03 
GeneralRe: Encapsulate this Class inside a Custom Control is done Pinmembershrirampophali29-Oct-07 21:19 
GeneralRe: Encapsulate this Class inside a Custom Control is done Pinmembershrirampophali29-Oct-07 21:20 
Questionabout javascript Pinmemberdisak22-Sep-06 1:14 
GeneralSomebody is ripping you off PinmemberWorkDoggy29-Aug-06 3:16 
AnswerRe: Somebody is ripping you off PinmemberStephan Pilz7-Sep-06 3:59 
GeneralRe: Somebody is ripping you off PinmemberGuyon A. Roche7-Sep-06 10:41 
AnswerRe: Somebody is ripping you off PinmemberWorkDoggy8-Sep-06 1:10 
GeneralRe: Somebody is ripping you off PinmemberGuyon A. Roche8-Sep-06 10:53 
GeneralRe: Somebody is ripping you off PinmemberStephan Pilz8-Sep-06 3:47 
NewsThe coolest date-time picker is here Pinmemberkan_izh27-Feb-06 22:20 
GeneralRe: The coolest date-time picker Pinmemberdisak22-Sep-06 1:32 
GeneralProvide us please with the proper encoding PinmemberJailorSubRuberoid21-Feb-06 2:36 
AnswerRe: Provide us please with the proper encoding PinmemberNikita D. Sinelnikoff24-Feb-06 1:22 
GeneralA Bugfix and some little extensions in Code PinmemberStephan Pilz20-Dec-05 20:33 
GeneralRe: A Bugfix and some little extensions in Code PinmemberGuyon A. Roche8-Sep-06 11:16 
GeneralRe: A Bugfix and some little extensions in Code PinmemberStephan Pilz22-Sep-06 3:52 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 24 Feb 2006
Article Copyright 2005 by Nikita D. Sinelnikoff
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid