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

home / programming / javascript / gr / 1

[next]

UNIX System Administrator - SUN Solaris, Veritas, EMC, Shell Scripting, SAN (NYC) Next Step Systems US-NY-New York Post A Job | Post A Resume

Developer News ActiveState Debuts Open Source Business Suite Salesforce Offers Visual App Builder Codesion Steps Out From CVS's Shadow

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 Use Web Caching to Make Your Web Site Faster · Creating an Online Shopping Cart Mechanism in PHP · Log JavaScript Errors Using an AJAX-driven Web Service Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Configuring Granular Settings for a Database Level Audit · The Perils of a Web 2.0 Transition on Your Business Processes · Facebook Redesigns Site —Again — Nears 400M Mark

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

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