WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / programming / javascript / gr / 1

[next]

Vice President of Risk Technology - READY TO HIRE! (NYC) Next Step Systems US-NY-New York Post A Job | Post A Resume

Developer News OpenOffice 3.2 Lands Amid Critical Changes Red Hat, IBM Firmly in KVM Virtualization Camp Red Hat Talks Up Open Source Cloud Plans

Compact JavaScript DatePicker Control

One of the many types of data entered into web forms is the date. There are many problems to deal with when handling date fields including:

To address these issues, here is a customized DatePicker control:

which provides an easy to use method of selecting a date.

The datepicker is managed by a single JavaScript class:

function DatePicker(name) {

     this.name = name;

     this.dt = new Date();

     document.write('<span id="' + name +

        '" style="z-index:1; position:absolute;visibility:hidden;"' +

        'class="DatePicker"></span>');

}

The constructor writes a hidden <span> in the document. This will be filled in later, at the point when the datepicker is first used. The show() method provides the main entry point to the datepicker control. Callers supply the initial date, the x and y coordinates within the document and a callback function to call when the date has been selected. Here, we use the Date object, rather than the date textual format. This allows the DatePicker class to be used with a variety of formats.

DatePicker.prototype.show = function(dt, x, y, callback) {

     if ( dt ) this.dt = dt;

     this.callback = callback;

     // if not rendered yet, do so

     if ( !this.oSpan ) this.render();

     // set coordinates

     this.oSpan.style.left = x;

     this.oSpan.style.top= y;

     this.fill();

     this.oSpan.style.visibility = "visible";

     this.oMonth.focus();

}

DatePicker.prototype.hide = function() {

     if ( this.oSpan ) this.oSpan.style.visibility = "hidden";

}

The render method uses DOM functions to create the structure of the datepicker control:

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.border = 1;

     oTR1 = oT1.insertRow(oT1.rows.length);

     oTD1 = oTR1.insertCell(oTR1.cells.length);

     oTD1.colSpan = 7;

     oTD1.className = 'DatePickerHdr';

     oT2 = document.createElement("table");

     oTD1.appendChild(oT2);

     oT2.border = 0;

     oTR2 = oT2.insertRow(oT2.rows.length);

     oTD2 = oTR2.insertCell(oTR2.cells.length);

     oTD2.title = this.texts.prevMonth;

     oTD2.onclick = function() { this.oDatePicker.onPrev(); }

     oTD2.oDatePicker = this;

     oTD2.innerHTML = "&lt;&lt;";

     oTD2.className = 'DatePickerHdrBtn';

     oTD2 = oTR2.insertCell(oTR2.cells.length);

     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.oYear = oTR2.insertCell(oTR2.cells.length);

     this.oYear.title = this.texts.yearTitle;

     this.oYear.oDatePicker = this;

     this.oYear.onclick = function() { this.oDatePicker.onYear(); }

     this.oYear.className = 'DatePickerHdrBtn';

     oTD2 = oTR2.insertCell(oTR2.cells.length);

     oTD2.title = this.texts.nextMonth;

     oTD2.onclick = function() { this.oDatePicker.onNext(); }

     oTD2.oDatePicker = this;

     oTD2.innerHTML = "&gt;&gt;";

     oTD2.className = 'DatePickerHdrBtn';

     oTR1 = oT1.insertRow(oT1.rows.length);

     for ( i = 0; i < 7; i++ ) {

        oTH1 = document.createElement("th");

        oTR1.appendChild(oTH1);

        oTH1.innerHTML = this.texts.days[i];

        oTH1.className = 'DatePicker';

     }

     this.aCells = new Array;

     for ( var j = 0; j < 6; j++ ) {

        this.aCells.push(new Array);

        oTR1 = oT1.insertRow(oT1.rows.length);

        for ( i = 0; i < 7; i++ ) {

           this.aCells[j][i] = oTR1.insertCell(oTR1.cells.length);

           this.aCells[j][i].oDatePicker = this;

           this.aCells[j][i].onclick =

              function() { this.oDatePicker.onDay(this); }

        }

     }

}

Once the structure of the datepicker has been built, all that remains is to fill in the values based on the member variable this.dt:

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();

        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.innerHTML = this.dt.getFullYear();

}

DatePicker.prototype.clear = function() {

     for ( var j = 0; j < 6; j++ )

        for ( var i = 0; i < 7; i++ ) {

           this.aCells[j][i].innerHTML = "&nbsp;"

           this.aCells[j][i].className = 'DatePickerBtn';

        }

}

home / programming / javascript / gr / 1

[next]

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

Created: June 2, 2003
Revised: December 26, 2003

URL: http://webreference.com/programming/javascript/gr