| 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] |
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
|
Article: Unleash the Power of Hardware-Accelerated HTML5 Canvas Article: Transform Your Website into a Web Application |
MORE WHITEPAPERS, EBOOKS, AND ARTICLES |
|
MORE WEBCASTS, PODCASTS, AND VIDEOS |
|
Learn from experts and get coding tips. Web Developer Basics: Multimedia In HTML5 |
Web Developer Basics: Learning About HTML5 MORE DOWNLOADS, EKITS, AND FREE TRIALS |
Created: June
2, 2003
Revised: December 26, 2003
URL: http://webreference.com/programming/javascript/gr
