Home >Web Front-end >JS Tutorial >js implementation code for a date drop-down menu_time and date

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

WBOY
WBOYOriginal
2016-05-16 17:49:241125browse
1. Look at the renderings first:
js implementation code for a date drop-down menu_time and date
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 < 13; 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 <= daysInMonth; 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




如何实现一个日期下拉菜单










在线运行演示:
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn