1. First View:
2. js Code
Year_month_day.js
Copy codeThe 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;
// Add the onchange event processing function to the year and month drop-down lists.
If (window.doc ument. 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 input parameters 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 input parameters 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 the attribute of the maximum year
DateSelector. prototype. MinYear = 1900;
// Add the attribute of the maximum year
DateSelector. prototype. MaxYear = (new Date (). getFullYear ();
// Initialize the year
DateSelector. prototype. InitYearSelect = function (){
// Cyclically Add the OPION element to the select object of the year
For (var I = this. MaxYear; I> = this. MinYear; I --){
// Create an OPTION object
Var op = argument Doc ument. createElement ("OPTION ");
// Set the OPTION object Value
Op. value = I;
// Set the OPTION object content
Op. innerHTML = I;
// Add the select object to the year
This. selYear. appendChild (op );
}
}
// Initialize the month
DateSelector. prototype. InitMonthSelect = function (){
// Cyclically Add the OPION element to the month select object
For (var I = 1; I <13; I ++ ){
// Create an OPTION object
Var op = argument Doc ument. createElement ("OPTION ");
// Set the OPTION object Value
Op. value = I;
// Set the OPTION object content
Op. innerHTML = I;
// Add the select object to the month
This. selMonth. appendChild (op );
}
}
// Obtain 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 ();
}
// Initialization days
DateSelector. prototype. InitDaySelect = function (){
// Use the parseInt function to obtain the current year and month.
Var year = parseInt (this. selYear. value );
Var month = parseInt (this. selMonth. value );
// Obtain the number of days in the current month
Var daysInMonth = DateSelector. DaysInMonth (year, month );
// Clear the original options
This. selDay. options. length = 0;
// Cyclically Add the OPION element to the select object of the number of days
For (var I = 1; I <= daysInMonth; I ++ ){
// Create an OPTION object
Var op = argument Doc ument. createElement ("OPTION ");
// Set the OPTION object Value
Op. value = I;
// Set the OPTION object content
Op. innerHTML = I;
// Add the select object to the number of days
This. selDay. appendChild (op );
}
}
// Method for handling the onchange event of the year and month. It obtains the event source object (selYear or selMonth)
// Call the InitDaySelect method provided by its Group Object (for example, DateSelector instance, see constructor) to reinitialize the number of days
// Parameter e is the event object
DateSelector. Onchange = function (e ){
Var selector = invalid argument Doc ument. all! = Null? E. srcElement: e.tar get;
Selector. Group. InitDaySelect ();
}
// Initialize the drop-down menu options based on parameters
DateSelector. prototype. InitSelector = function (year, month, day ){
// This method can be called externally, so we need to clear selYear and selMonth options here
// In addition, because the InitDaySelect method has a days clearing drop-down menu, you do not 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 values of year and month
This. selYear. selectedIndex = this. MaxYear-year;
This. selMonth. selectedIndex = month-1;
// Initialization days
This. InitDaySelect ();
// Set the initial number of days
This. selDay. selectedIndex = day-1;
}
3. HTML code
Year_month_day.htmCopy codeThe Code is as follows: year_month_day.htm
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> how to implement a date drop-down menu </title>
<Script type = "text/javascript" src = "year_month_day.js"> </script>
</Head>
<Body>
<Select id = "selYear"> </select>
<Select id = "selMonth"> </select>
<Select id = "selDay"> </select>
<Script type = "text/javascript">
Var selYear = your own Doc ument. getElementById ("selYear ");
Var selMonth = your own Doc ument. getElementById ("selMonth ");
Var selDay = your own Doc ument. getElementById ("selDay ");
// Create a DateSelector class instance and pass the three select objects
New DateSelector (selYear, selMonth, selDay, 2004, 2, 29 );
// You can also try the following code
// Var dt = new Date (2004, 1, 29 );
// New DateSelector (selYear, selMonth, selDay, dt );
</Script>
</Body>
</Html>
Online running Demo:Xmlns = "http://www.w3.org/1999/xhtml">
