| home / programming / javascript / gr / 1 |   [next] |
|
|
|
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:
· Garbage data · Validating · Formats |
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 = "<<";
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 = ">>";
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 = " "
this.aCells[j][i].className = 'DatePickerBtn';
}
}
| home / programming / javascript / gr / 1 | [next] |
| ||||||||||||||||||||
Created: June
2, 2003
Revised: December 26, 2003
URL: http://webreference.com/programming/javascript/gr
