Date Triple control

Use the Seajs module to write a triple date selection control that can be configured to display page element information

Define (function (Require, exports, module) {' Use strict ';    var $ = require (' Zepto ');    Require ('./dateselect.css '); var config = {"Dateselect": ". Dateselect", "Year_box": ' J_select_year ',//year Object "Month_box": ' j_s        Elect_month ',//month object "Day_box": ' J_select_day ',//day Object "Hiddenname": "Hiddenname",//Hidden Date value               "Birthday": 0,//date default ' year ': 0,//year ' month ': 0,//month ' Day ': 0, Day "Min_year": 0,//Minimum Year "Max_year": 0,//maximum year "OnChange"        : null//Date changed when executed};        var dateselect = function () {var = this;        self.config = config;        } DateSelect.prototype.init = function (options) {var = this;        Self.ops = $.extend ({}, Self.config, options);        Self.el = $ (dateseltemplate (self.ops)); Self.sel_year = $ (self.el). Find ("." +self.ops.year_box);   Year Selection Object     Self.sel_month = $ (self.el). Find ("." +self.ops.month_box); Year Select Object Self.sel_day = $ (self.el). Find ("." +self.ops.day_box);        Year Selection object Self.dateselectwrap=self.ops.dateselect;        Self.birthday=self.ops.hiddenname; Self.year_box= "."        +self.ops.year_box; Self.month_box= "."        +self.ops.month_box; Self.day_box= "."    +self.ops.day_box;    }; DateSelect.prototype.start = function () {this.    Datesel ();    };        DateSelect.prototype.DateSel = function () {initdate (this);    $ (this.dateselectwrap). HTML (This.el);                     } function Initdate (dateselect) {var date = new Date (); Current date var iminyear = parseint (dateSelect.ops.min_year); Minimum year var imaxyear = parseint (dateSelect.ops.max_year);    Maximum var imonth = parseint (dateSelect.ops.month);      Set the month var iday = parseint (DateSelect.ops.day); Set Day Dateselect.year = parseint (dateSelect.ops.year) | |   Date.getfullyear ();      Get year  Dateselect.month = 1 <= imonth && imonth <= 12?        IMonth:date.getMonth () + 1; Dateselect.day = iday > 0?        IDay:date.getDate (); Dateselect.minyear = iminyear && iminyear < dateselect.year?        IMinYear:dateSelect.Year; Dateselect.maxyear = imaxyear && imaxyear > dateselect.year?        IMaxYear:dateSelect.Year; Set year Setselect (Dateselect.el,dateselect.year_box, Dateselect.minyear, Dateselect.maxyear-dateselect.minyear + 1 , DateSelect.ops.year?        Dateselect.year-dateselect.minyear:null);        Set month Setselect (Dateselect.el,dateselect.month_box, 1, dateSelect.ops.month, dateselect.month-1: null);                Set the day Setday (Dateselect.el,dateselect.day_box,dateselect.year,dateselect.month,dateselect.day);        if (dateSelect.ops.month) {dateSelect.sel_month.removeClass (' disabled ');//If the month has a value, remove the disabled on the month } if (DateSelect.ops.day) {Dateselect.sEl_day.removeclass (' disabled '); If day has value after removing disabled}//Date Changed event DateSelect.sel_year.on (' Change ', function () {var $            Self = $ (this);            Dateselect.year = $self. val (); DateSelect.sel_month.removeClass (' disabled '); If the year has a value, remove the disabled setday on the month (Dateselect.el,dateselect.ops.day_box,dateselect.year,dateselect.month,datesel Ect.            Day); Is there a callback function if (typeof dateSelect.ops.onChange = = = ' function ') {dateSelect.ops.onChange.call (dat            Eselect);        } $ ("#" +dateselect.birthday). Val (dateselect.year+ "-" +dateselect.month+ "-" +dateselect.day ");        });            DateSelect.sel_month.on (' Change ', function () {var $self = $ (this);            Dateselect.month = $self. val (); DateSelect.sel_day.removeClass (' disabled '); If the month has value, remove the disabled setday on the day (Dateselect.el,dateselect.ops.day_box,dateselect.year,dateselect.month,datesel Ect.            Day); IsNo callback function if (typeof dateSelect.ops.onChange = = = ' function ') {DateSelect.ops.onChange.call (Datesel            ECT);        } $ ("#" +dateselect.birthday). Val (dateselect.year+ "-" +dateselect.month+ "-" +dateselect.day ");        });            DateSelect.sel_day.on (' Change ', function () {var $self = $ (this);            Dateselect.day = $self. val (); Is there a callback function if (typeof dateSelect.ops.onChange = = = ' function ') {dateSelect.ops.onChange.call (dat            Eselect);        } $ ("#" +dateselect.birthday). Val (dateselect.year+ "-" +dateselect.month+ "-" +dateselect.day ");    });        } function Setselect (El,select_box, IStart, Ilength, IIndex) {var TPL = '; for (var i = 0; i < ilength; i++) {TPL + = ' <option value= "' + (IStart + i) + '" > ' + (IStart + i) + ' &        Lt;/option> ';        } el.find (Select_box). HTML (TPL); if (iIndex! = null) {El.find (Select_box). Find (' option '). EQ (iIndex). attr ("Checked", true);        El.find (Select_box). Val ($ (EL). Find (Select_box). Find (' option '). EQ (IIndex). Val ()); }} function Setday (el,select_box,year,month,day) {//Get month days var daysinmonth = new Date (year, month, 0)        . GetDate ();        if (Day > DaysInMonth) {day = DaysInMonth;    } setselect (El,select_box, 1, DaysInMonth, day day-1: null); } function dateseltemplate (config) {var temp = ' <div data-toggle= "Datesel" class= "Datesel" > ' + ' &L T;input type= "hidden" id= "' +config.hiddenname+ '" value= "' +config.birthday+ '" name= "' +config.hiddenname+ '" > ' + ' &        Lt;select class= "' +config.year_box+ '" placeholder= "Please select the year" data-msg= "Please select Year" name= "Years" > ' + ' </select> ' + ' <span class= ' span-inline > Year </span> ' + ' <select class= ' ' +config.month_box+ ' "placeholder=" please select month "Data-msg=" Please select month "name=" "Month" > ' + ' </select> ' + ' <span class= "span-inline "> Month </span> ' + ' <select class=" ' +config.day_box+ ' "placeholder=" Please select the date "data-msg=" Please select the date "Name=" Day "        > ' + ' </select> ' + ' <span class= "Span-inline" > Day </span> ' + ' </div> '    return temp; } module.exports = Dateselect;});

Calling methods

Define (function (Require, exports, module) {    ' use strict ';    var $ = require (' Zepto ');    var datesel=require ('./dateselectmobile ');    var datesel=new datesel ();    var birthday = "";    var d = new Date (birthday);    var year = d.getfullyear () | | 0;    var month = D.getmonth () + 1 | | 1;    var day = d.getdate () | | 1;    if (birthday== "")    {        birthday=year+ "-" +month+ "-" +day;        $ ("#birthday"). Val (year+ "-" +month+ "-" +day);    }    Datesel.init ({        "Dateselect": ". DateSelect1",        "Year_box": ' J_year ',      //year object        "Month_box": ' J_ Month ',     //Monthly Object        "Day_box": ' J_day ',//       Day Object        "Hiddenname": "Birthday",        "birthday": Birthday,        "Year": Years,           //annual "        Month": Month,          //month        "Day": Days,//            daily        "Min_year": 1970,           / /Minimum year        "Max_year": New Date (). getFullYear ()//maximum year    });    Datesel.start ();});

Page testing

<!doctype html>
　　
Test results
Date Triple control