jquery Mobile Mobile End Calendar Date Selection

jquery Mobile Mobile End Calendar Date selection is a dependent on the Iscroll sliding component, the style does not attach any pictures, the date is accurate to the hour and minute, can automatically locate the current system time.

Introducing Date.js and Iscroll.js files to the page

 

Date.js


* * * Date plugin * Sliding selection date (year, month, day) * V1.1 */function ($) {$.fn.date = function (options,ycallback,ncallback) {
        Plugin default option var that = $ (this);
        var DocType = $ (this). is (' input ');
        var datetime = false;
        var nowdate = new Date ();
        var indexy=1,indexm=1,indexd=1;
        var indexh=1,indexi=1,indexs=0;
        var inity=parseint ((Nowdate.getyear () + ""). substr (1,2));
        var initm=parseint (Nowdate.getmonth () + "") +1;
        var initd=parseint (nowdate.getdate () + "");
        var inith=parseint (nowdate.gethours ());
        var initi=parseint (Nowdate.getminutes ());
        var inits=parseint (Nowdate.getyear ());
        var yearscroll=null,monthscroll=null,dayscroll=null;
        var hourscroll=null,minutescroll=null,secondscroll=null;                   $.fn.date.defaultoptions = {beginyear:2000,//date-year-endyear:2020 Date-year-end beginmonth:1,//date-month-end
            Endmonth:12,//date-month-end beginday:1,//Date--end of day ENDDAY:31,//Date------end of Beginhour:1, Endhour:12, Beginminute                    : endminute:59, Curdate:false,//Open date is located to the current date theme: "Date",                    Control style (1: Date, 2: Date + time) Mode:null,//mode of operation (sliding mode) event: "Click", Open Date plugin defaults to click after pop-up date show:true}//user option overrides plugin default option var opts = $.ex
        Tend (true, {}, $.fn.date.defaultoptions, options);
        if (Opts.theme = = "datetime") {datetime = true;}
        if (!opts.show) {that.unbind (' click ');      else{//Binding event (the default event is get Focus) That.bind (Opts.event,function () {Createul ();   The date that the dynamically generated control displays Init_iscrll (); Initialize Iscrll extendoptions ();
                Display control That.blur ();
                    if (datetime) {showdatetime ();
                Refreshtime ();
                } refreshdate ();
            Bindbutton ();
        })  
        };
            function Refreshdate () {Yearscroll.refresh ();
            Monthscroll.refresh ();

            Dayscroll.refresh ();
            Resetinitdete ();
            Yearscroll.scrollto (0, inity*40, true);
            Monthscroll.scrollto (0, initm*40-40, true); 
        Dayscroll.scrollto (0, initd*40-40, true);
            function Refreshtime () {Hourscroll.refresh ();
            Minutescroll.refresh ();
            Secondscroll.refresh ();   if (inith>12) {//judge whether the current time is morning or afternoon Secondscroll.scrollto (0, initd*40-40, true);
            Show "PM" INITH=INITH-12-1;
            Hourscroll.scrollto (0, inith*40, true); Minutescroll.scrollTo (0, initi*40, true);
        Inith=parseint (Nowdate.gethours ());
            function ResetIndex () {indexy=1;
            Indexm=1;
        indexd=1;
            function Resetinitdete () {if (opts.curdate) {return false;}
            else if (that.val () = = "") {return false;}
            inity = parseint (That.val (). substr (2,2));
            INITM = parseint (That.val (). substr (5,2));
        INITD = parseint (That.val (). substr (8,2));
            function Bindbutton () {resetindex (); $ ("#dateconfirm"). Unbind (' click '). Click (function () {var datestr = $ ("#yearwrapper ul li:eq (" +indexy+ ")" ). HTML (). substr (0,$ ("#yearwrapper ul Li:eq (" +indexy+) "). html (). length-1) +"-"+ $ (" #monthwrapper UL Li:eq ("+indexm+") "). html (). substr (0,$ (" #monthwrapper ul li:eq ("+indexm+") "). html (). length-1) +"-"+ $ (" # Daywrapper ul Li:eq ("+math.round (indexd) +") "). html (). substr (0,$ (" #daywrapper ul Li:eq ("+math.round (INDEXD) +")). html (). length-1); if (datetime) {if (Math.Round (indexs) ===1) {//pm $ ("#Hourwrapper ul Li:eq (" +inde xh+ ")"). HTML (parseint ($ ("#Hourwrapper ul Li:eq (" +indexh+) "). html (). substr (0,$ (" #Hourwrapper ul li:eq ("+indexh+") " ). HTML (). length-1)) +12}else{$ ("#Hourwrapper ul li:eq (" +indexh+ ")"). HTML (PA Rseint ("#Hourwrapper ul li:eq (" +indexh+ ")"). html (). substr (0,$ ("#Hourwrapper ul li:eq (" +indexh+ ")). HTML (). length-1))} datestr+= "" "+$ (" #Hourwrapper ul li:eq ("+indexh+") "). html (). substr ( 0,$ ("#Minutewrapper ul li:eq (" +indexh+ ")"). html (). Length-1) + ":" + $ ("#Minutewrapper ul Li:eq" ("
                         +indexi+ ")"). html (). substr (0,$ ("#Minutewrapper ul li:eq (" +indexi+ ")"). html (). length-1);
                indexs=0; } if (ycallback===undefined) {if (DocType) {That.val (dateSTR);}
                Else{that.html (DATESTR);}
                }else{Ycallback (DATESTR); 
                $ ("#datePage"). Hide ();
            $ ("#dateshadow"). Hide ();
            }); 
		$ ("#datecancle"). Click (function () {$ ("#datePage"). Hide ();
                $ ("#dateshadow"). Hide ();
            Ncallback (FALSE);
        }); 
            function Extendoptions () {$ ("#datePage"). Show ();
        $ ("#dateshadow"). Show (); }//Date sliding function Init_iscrll () {var stry = $ ("#yearwrapper ul li:eq (" +indexy+ ")"). html (). su
            BSTR ("#yearwrapper ul li:eq (" +indexy+ ")"). html (). length-1); var strm = $ ("#monthwrapper ul li:eq (" +indexm+ ")"). html (). substr (0,$ ("#monthwrapper ul Li:eq (" +indexm+) "). HTML (). length-1) Yearscroll = new Iscroll ("Yearwrapper", {snap: "Li", Vscrollbar:false, Onscrollend: function () {indexy = (THIS.Y/40) * (-1) +1;
                          Opts.endday = Checkdays (STRY,STRM);
                           $ ("#daywrapper ul"). HTML (Createday_ul ());
                  Dayscroll.refresh ();
              }});
                      Monthscroll = new Iscroll ("Monthwrapper", {snap: "Li", Vscrollbar:false, Onscrollend:function () {
                      INDEXM = (THIS.Y/40) * (-1) +1;
                          Opts.endday = Checkdays (STRY,STRM);
                           $ ("#daywrapper ul"). HTML (Createday_ul ());
                  Dayscroll.refresh ();
              }});
                      Dayscroll = new Iscroll ("Daywrapper", {snap: "Li", Vscrollbar:false, Onscrollend:function () {
                  Indexd = (THIS.Y/40) * (-1) +1;
        }});
            function Showdatetime () {init_iscroll_datetime ();
            Addtimestyle (); 
            $ ("#datescroll_datetime"). Show (); $ ("#Hourwrapper ul"). HTML (Createhours_ul ());
            $ ("#Minutewrapper ul"). HTML (Createminute_ul ());
        $ ("#Secondwrapper ul"). HTML (Createsecond_ul ()); }//Date + time sliding function init_iscroll_datetime () {hourscroll = new Iscroll ("Hourwrapper", {snap: "L I ", Vscrollbar:false, Onscrollend:function () {indexh = Math.Round ((THIS.Y/40) * (-1)) +1
                    ;
            Hourscroll.refresh (); }) Minutescroll = new Iscroll ("Minutewrapper", {snap: "Li", Vscrollbar:false, Onscrollend:functi
                    On () {Indexi = Math.Round ((THIS.Y/40) * (-1)) +1;
            Hourscroll.refresh (); }) Secondscroll = new Iscroll ("Secondwrapper", {snap: "Li", Vscrollbar:false, Onscrollend:functi
                    On () {indexs = Math.Round (THIS.Y/40) * (-1));
            Hourscroll.refresh (); }}} function Checkdays (year,month) {var new_year = Year            Take the current year var new_month = month++;//Remove the first day of one months to facilitate calculation (last day is not fixed) if (month>12)        If the current is greater than December, the year is transferred to the next year {New_month-=12;            month minus new_year++;                Year Increment} var new_date = new Date (new_year,new_month,1);
        Take the first day of the current month return (new Date (New_date.gettime () -1000*60*60*24)). GetDate ()//Get the last day date of the month}
            function Createul () {Createdateui ();
            $ ("#yearwrapper ul"). HTML (Createyear_ul ());
            $ ("#monthwrapper ul"). HTML (Createmonth_ul ());
        $ ("#daywrapper ul"). HTML (Createday_ul ());
                function Createdateui () {var str = ' + ' <div id= ' Dateshadow ' ></div> ' + ' <div id= ' datepage ' class= ' page ' > ' + ' <section> ' + ' &L T;div id= "DAtetitle ">