js implementation code for a date drop-down menu_time and date

1. Look at the renderings first:

2.js code
year_month_day.js

Copy code The code is as follows:

year_month_day.js
function DateSelector(selYear, selMonth, selDay) {
this.selYear = selYear ;
this.selMonth = selMonth;
this.selDay = selDay;
this.selYear.Group = this;
this.selMonth.Group = this;
// Give the year and month Add a function to handle the onchange event in the drop-down menu
if (window.document.all != null) // IE
{
this.selYear.attachEvent("onchange", DateSelector.Onchange);
this.selMonth.attachEvent("onchange", DateSelector.Onchange);
}
else // Firefox
{
this.selYear.addEventListener("change", DateSelector.Onchange, false);
this.selMonth.addEventListener("change", DateSelector.Onchange, false);
}
if (arguments.length == 4) // If the number of parameters passed in is 4, the last parameter Must be a Date object
this.InitSelector(arguments[3].getFullYear(), arguments[3].getMonth() 1, arguments[3].getDate());
else if (arguments.length = = 6) // If the number of parameters passed in is 6, the last three parameters must be the initial year, month and day values ​​
this.InitSelector(arguments[3], arguments[4], arguments[5]);
else // The current date is used by default
{
var dt = new Date();
this.InitSelector(dt.getFullYear(), dt.getMonth() 1, dt.getDate()) ;
}
}
// Add a maximum year attribute
DateSelector.prototype.MinYear = 1900;
// Add a maximum year attribute
DateSelector.prototype.MaxYear = (new Date()).getFullYear();
//Initialize the year
DateSelector.prototype.InitYearSelect = function () {
// Loop to add OPION elements to the year select object
for (var i = this.MaxYear; i >= this.MinYear; i--) {
// Create a new OPTION object
var op = window.document.createElement("OPTION");
// Set the value of the OPTION object
op.value = i;
// Set the content of the OPTION object
op.innerHTML = i;
// Add to the year select object
this. selYear.appendChild(op);
}
}
//Initialize the month
DateSelector.prototype.InitMonthSelect = function () {
// Loop to add OPION elements to the month select object
for (var i = 1; i // Create a new OPTION object
var op = window.document.createElement("OPTION");
// Set OPTION The value of the object
op.value = i;
// Set the content of the OPTION object
op.innerHTML = i;
// Add to the month select object
this.selMonth.appendChild( op);
}
}
// Get the number of days in the current month based on the year and month
DateSelector.DaysInMonth = function (year, month) {
var date = new Date(year, month , 0);
return date.getDate();
}
//Initialize the number of days
DateSelector.prototype.InitDaySelect = function () {
// Use the parseInt function to get the current year and month
var year = parseInt(this.selYear.value);
var month = parseInt(this.selMonth.value);
// Get the number of days in the current month
var daysInMonth = DateSelector.DaysInMonth (year, month);
// Clear the original options
this.selDay.options.length = 0;
// Loop to add OPION elements to the day select object
for (var i = 1; i // Create a new OPTION object
var op = window.document.createElement("OPTION");
// Set the value of the OPTION object
op.value = i;
// Set the content of the OPTION object
op.innerHTML = i;
// Add to the day select object
this.selDay.appendChild(op);
}
}
// Method to handle year and month onchange events, it gets the event source object (i.e. selYear or selMonth)
// and calls its Group object (i.e. DateSelector instance, see constructor The InitDaySelect method provided by function) re-initializes the number of days
//The parameter e is the event object
DateSelector.Onchange = function (e) {
var selector = window.document.all != null ? e.srcElement: e.target;
selector.Group.InitDaySelect();
}
//Initialize drop-down menu options according to parameters
DateSelector.prototype.InitSelector = function (year, month, day) {
// Since this method can be called externally, we also need to clear the selYear and selMonth options here
// In addition, because the InitDaySelect method already has a clear days drop-down menu, there is no need to repeat the work here
this.selYear.options.length = 0;
this.selMonth.options.length = 0;
//Initialize the year and month
this.InitYearSelect();
this.InitMonthSelect() ;
//Set the initial value of year and month
this.selYear.selectedIndex = this.MaxYear - year;
this.selMonth.selectedIndex = month - 1;
//Initialize the number of days
this.InitDaySelect();
//Set the initial value of the day
this.selDay.selectedIndex = day - 1;
}

3.HTML代码
year_month_day.htm

复制代码 代码如下:

year_month_day.htm