| home / programming / javascript / gr / 1 |   [previous] |
|
|
|
Now for the actions: Methods onPrev() and onNext() are called when the << and >> 'buttons' are pressed. All they do is decrement (or increment) the current month (and if necessary, the year) and then call this.fill() to adjust the display:
DatePicker.prototype.onPrev = function() {
if ( this.dt.getMonth() == 0 ) {
this.dt.setFullYear(this.dt.getFullYear() - 1);
this.dt.setMonth(11);
} else {
this.dt.setMonth(this.dt.getMonth() - 1);
}
this.fill();
}
DatePicker.prototype.onNext = function() {
if ( this.dt.getMonth() == 11 ) {
this.dt.setFullYear(this.dt.getFullYear() + 1);
this.dt.setMonth(0);
} else {
this.dt.setMonth(this.dt.getMonth() + 1);
}
this.fill();
}
The onMonth() method performs a similar function by reacting to changes in the month combo box:
DatePicker.prototype.onMonth = function() {
this.dt.setMonth(this.oMonth.value);
this.fill();
}
When the year field is clicked on, the onYear() method asks the user to enter a new one:
DatePicker.prototype.onYear = function() {
var y = parseInt(prompt(this.texts.yearQuestion, this.dt.getFullYear()));
if ( !isNaN(y) ) {
this.dt.setFullYear(parseInt(y));
this.fill();
}
}
When a day is clicked on, the datepicker takes this as the date selection. The date is set and the callback function is called with the selected date.
DatePicker.prototype.onDay = function(oCell) {
var d = parseInt(oCell.innerHTML);
if ( d > 0 )
{
this.dt.setDate(d);
this.hide();
this.callback(this.dt);
}
}
To make internationalization easier, all forms of displayed text are held here in this definition. Feel free to change these values to the language of your choice (the days of the week must start on Sunday):
DatePicker.prototype.texts = {
months: [
"January", "February", "March",
"April", "May", "June",
"July", "August", "September",
"October", "November", "December"
],
days: ["S", "M", "T", "W", "T", "F", "S"],
prevMonth: "Previous Month",
nextMonth: "Next Month",
yearTitle: "Year. Click to modify.",
yearQuestion: "Enter a new year:"
};
Now we’re ready to make use of the datepicker control. In this example, a textbox is used to hold the date value in some format. When the user clicks on the text box, control is passed to the datepicker control which handles the user input. The following HTML shows how easy this is:
Enter Date:<input type=text title="MM/DD/YYYY" onfocus="showDP(this);">
<script type="text/javascript">
var oDatePicker = new DatePicker('theDatePicker');
</script>
The showDP() and callback functions are shown here:
function showDP(oTxt) {
if ( !document.getElementById ) return;
// since we control the text format in callback(), getting the date is easy
var aDt = document.f.d.value.split("/");
var dt = null;
if ( aDt && (aDt.length == 3) ) {
dt = new Date(parseInt(aDt[2]),parseInt(aDt[0])-1,parseInt(aDt[1]));
}
// store the textbox for use in the client
oDatePicker.client = oTxt;
oDatePicker.show(dt, oTxt.offsetLeft, oTxt.offsetTop, callback);
}
function callback(dt)
{
oDatePicker.client.value =
(dt.getMonth() + 1) + "/" +
dt.getDate() + "/" +
dt.getFullYear();
}
The DatePicker has been designed to fit in with the look and feel of the surrounding page with the use of the following styles:
<style type="text/css">
.DatePicker /* main datepicker style */
{
background-color: #e0ffe0;
}
.DatePickerHdr /* style for the header row */
{
background-color: #c0ffc0;
}
.DatePickerHdrBtn /* style for buttons in the header row */
{
cursor: pointer;
}
.DatePickerBtn /* style for the calendar area */
{
cursor: pointer;
}
.DatePickerBtnSelect /* highlighted date */
{
background-color: #c0c0ff;
cursor: pointer;
}
</style>
A final word - this date picker control relies on JavaScript being enabled in the user's browser. If this isn't the case, the DatePicker code will do the next best thing, namely fail gracefully and give the user access to the text box.
###
Guyon Roche is a freelance web developer in
| home / programming / javascript / gr / 1 | [previous] |
| ||||||||||||||||||||
Created: June
2, 2003
Revised: December 26, 2003
URL: http://webreference.com/programming/javascript/gr
