<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> dateselector </title> <st Yle> body {margin:0px; padding:0px; font-size:12px; #year, #month, #date {width:60px; margin-right:3px; } </style> <script> var $ = function (ID) {return ' string ' = = typeof ID? document.getElementById (ID): Id }; var Extend = function (destination, source) {for (var Pro in source) {Destination[pro] = Source[pro] ; return destination; var addevent = function (obj, type, fn) {if (Obj.addeventlistener) {Obj.addeventlistener (type , FN, false); return true; }else if (obj.attachevent) {obj[' e ' +type+fn] = fn; OBJ[TYPE+FN] = function () {obj[' E ' +type+fn] (window.event); } obj.attachevent (' On ' +type, OBJ[TYPE+FN]); return true; return false; } /*! * Dateselector * * Copyright (c) 2009 GoodNess2010 * DATE:2009-12-15 (Tuesday)/function Da Teselector (Idyear, Idmonth, iddate, options) {var D = new Date (); This.year = $ (idyear); This.month = $ (idmonth); This.date = $ (iddate); This.nowyear = D.getfullyear (); This.nowmonth = D.getmonth () + 1; This.nowdate = D.getdate (); Extend (This, this.setoptions (options)); }; Dateselector.prototype = {setoptions:function (options) {//Default item this.options = { Flooryear:5,//5 years before the current year ceilyear:7,//7 years from the current year OnS Tart:function () {},//predecessor Event Onend:function () {}//End Event}; Return Extend (this.options, Options | | {}); }, Createoption:function (container, start, end, sign) {sign = sign | | start; var _num = parseint (end-start+1, 10); Container.options.length = _num; for (var i = 0; i < _num i++) {container.options[i].text = Container.options[i].value = start + i; } Container.selectedindex = (Sign-start >= _num? _num-1: Sign-start); }, Getdate:function (Y, m) {return new Date (Y, M, 0). GetDate (); }, Getseltext:function (SEL) {return sel.options[sel.selectedindex].text; }, Changedate:function (Bindo) {var _this = this; Addevent (Bindo, ' Change ', function () {var y = _this.getseltext (_this.year), M = _this.getseltext (_this.mo nth), d = _this.getseltext (_this.date); _this.createoption (_this.date, 1, _this.getdate (Y, M), D); _this.onend (); }); }, Bindevents:function () {var _this = this; This.changedate (this.year); This.changedate (This.month); Addevent (this.date, ' Change ', function () {_this.onend ();}); }, Init:function () {var _startyear = parseint (This.nowyear-this.flooryear, 10); var _endyear = parseint (this.nowyear + this.ceilyear, 10); var _enddate = this.getdate (this.nowyear, this.nowmonth, 0); This.createoption (This.year, _startyear, _endyear, this.nowyear); This.createoption (This.month, 1, this.nowmonth); This.createoption (this.date, 1, _enddate, this.nowdate); This.bindevents (); This.onstart (); } }; </script> </pead> <body> <select id= "year" ></select><select id= "Month" ></sel Ect><sElect id= "date" ></select> <span id= "info" ></span> <script> var dateselector = new Dateselector (' Year ', ' Month ', ' date ', {flooryear:1}); Dateselector.onstart = Dateselector.onend = function () {$ (' info '). InnerHTML = This.getseltext (this.year) + ' year ' + (' 0 ' + this.getseltext (this.month)). Slice (-2) + ' month ' + (' 0 ' + this.getseltext (this.date)). Slice (-2) + ' Day '; } dateselector.init (); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
[Parameter description]
Copy Code code as follows:
var dateselector = new Dateselector (Nianxia pull ID, month dropdown ID, Sun Pull ID, {flooryear: Forward years, Ceilyear: Back Years});
Dateselector.onstart = Dateselector.onend = function () {//Custom Start End Event
$ (' info '). InnerHTML = This.getseltext (this.year) + ' year ' +
(' 0 ' + this.getseltext (this.month)). Slice (-2) + ' month ' +
(' 0 ' + this.getseltext (this.date)). Slice (-2) + ' Day ';
}
Dateselector.init (); Initialization started
[Description text]
The method of generating option here chooses the Options[i].text = Options[i].value = i;
A method was used during the period:
Container.options[container.options.length] = new Option (I, I, false, (i = = sign? true:false))
This new option has 4 parameters available (text, value, defaultselected, selected); The last parameter can be set to select.
But no official information has been found. Bugs are also encountered in IE6. Please correct me if you have any useful.
Bug Demo
This is not a problem in the IE7,IE8,FF3. But in IE6 will be selected is the previous one. There are still unknown reasons. (after confirmation seems to be the problem of IE Tester.) The following scenario is also a simple generation option scheme.
Test code:
Copy Code code as follows:
<select id= "year" ></select>
<script type= "text/" JavaScript ">
<!--
var osel = document.getElementById (' year ');
var sign = 2008;
for (var i = 2001 I < i++) {
Osel.options[osel.options.length] = new Option (I, I, false, (i = = sign? t Rue:false));
}
//-->
</script>
