JavaScript Date Cascade component code Analysis and demo

The recent research under JS date cascade Effect feels good, then looked at the next Kissy also just have such a component, also looked at the source code, wrote a good, through Google was first in 2011 Taobao Tiger (nickname) with the original written JS wrote a (it seems to be said to be from the Yui side of the reconstructed) Specific can see his blog park, feel Kissy component source code is also similar to Yui and so I today's basic ideas and their just as through their own analysis and use their own way of packaging.

Basic principle

1. There are ' year dropdown box DOM nodes ', ' Month dropdown box DOM node ', ' Days dropdown box DOM node ', ' Start date ', ' End Date ', ' Default date ' configuration item

1. If the start argument date is NULL, the default is to start with "1900-01-01"

2. If the end date is blank, the default end date is the current time.

3. If the default date is NULL, the default date defaults to the current time.

2. The number of days corresponding to the month can be directly written dead as: _dayinmonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; The default number of days for each month from January to December, and of course the 29 days of February leap years will be judged in the code.

3. Render the year interval, the month interval, and the corresponding number of days respectively. (if there is a default date and the default date is greater than or equal to the start date and less than or equal to the end date), the default date is displayed when the page loads.

4. Bind change events When you switch to different years, the months and days are also rendered separately.

The basic configuration items are as follows:

Methods of external delivery

1. GetDate () returns the current time, in the form of YYYY-MM-DD

2. GetYear () returns the current year

3. GetMonth () returns the current month

4. Getday () returns the number of days in the current month.

Jsfiddle demo links are as follows:

View demo please click me!

The following code analysis is as follows:

1. Initializes the invoke Init method: "Year, month, Day", respectively, to get the default time for the start time end time. The following code:

Start time Optional If empty then the default start time is 1900-01-01 if (_config.datestart!= ") {this.startdate = {
                Y:new Date (_config.datestart). getFullYear (), M:new date (_config.datestart). getmonth () + 1,
        D:new Date (_config.datestart). GetDate ()};
    
            }else {var datestart = ' 1900/01/01 ';  This.startdate = {y:new date (datestart). getFullYear (), M:new date (DateStart). GetMonth ()
        + 1, d:new Date (DateStart). GetDate ()};
                }//dateend defaults to NULL if not passed in the current time if (_config.dateend = = ") {this.enddate = { Y:new date (). getFullYear (), M:new date (). GetMonth () + 1, d:new date (). GE
        Tdate ()}; }else {this.enddate = {y:new Date (_config.dateend). getFullYear (), M:new Da Te (_config.dateend). getmonth () + 1, d:new Date (_config.dateend). GetDate ()};  //default time optional If the default time is empty then take the current time if (_config.datedefault!= ') {this.defaultdate = {y:new date (_config.datedefault). getFullYear (), M:new date (_config.datedefault). Getm
        Onth () + 1, d:new Date (_config.datedefault). GetDate ()}; }else {this.defaultdate = {y:new date (). getFullYear (), M:new date (). Getmon
        Th () + 1, d:new Date (). GetDate ()}; ///Determine if the time is reasonable if (Date.parse (Self._changeformat (_config.datestart)) > Date.parse (Self._changeformat (_ 
          config.dateend)) | | (Date.parse (Self._changeformat (_config.datedefault)) > Date.parse (Self._changeformat (_config.dateEnd)))
        {return; }