JAVASCRIPT   14

datePicker.js

Guest on 15th August 2021 07:06:32 AM

  1.  
  2. //datePicker日期控件 v1.0
  3. //var calendar = new datePicker();
  4. //calendar.init({
  5. //    'trigger': '#demo1', /*选择器,触发弹出插件*/
  6. //    'type': 'date',/*date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择*/
  7. //    'minDate':'1900-1-1',/*最小日期*/
  8. //    'maxDate':new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate(),/*最大日期*/
  9. //    'onSubmit':function(){/*确认时触发事件*/
  10. //        var theSelectData=calendar.value;
  11. //    },
  12. //    'onClose':function(){/*取消时触发事件*/
  13. //    }
  14. //});
  15. */
  16. //    'onSubmit':function(){/*确认时触发事件*/
  17. //        var theSelectData=calendar.value;
  18. //    },
  19. //    'onClose':function(){/*取消时触发事件*/
  20. //    }
  21. //});
  22.  
  23. window.datePicker = (function() {
  24.     var MobileCalendar = function() {
  25.         this.gearDate;
  26.         this.minY = 1900;
  27.         this.minM = 1;
  28.         this.minD = 1;
  29.         this.maxY = 2099;
  30.         this.maxM = 12;
  31.         this.maxD = 31;
  32.         this.value="";
  33.     };
  34.    
  35.     var cssHtm='.gearYM,.gearDate,.gearDatetime,.gearTime{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:10px;background-color:rgba(0,0,0,0.2);display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9900;overflow:hidden;-webkit-animation-fill-mode:both;animation-fill-mode:both}.date_ctrl{vertical-align:middle;background-color:#d5d8df;color:#000;margin:0;height:auto;width:100%;position:absolute;left:0;bottom:0;z-index:9901;overflow:hidden;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slideInUp{animation:slideInUp .3s ease;-webkit-animation:slideInUp .3s ease;}@-webkit-keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ym_roll,.date_roll,.datetime_roll,.time_roll{display:-webkit-box;width:100%;height:auto;overflow:hidden;font-weight:bold;background-color:transparent;-webkit-mask:-webkit-gradient(linear,0% 50%,0% 100%,from(#debb47),to(rgba(36,142,36,0)));-webkit-mask:-webkit-linear-gradient(top,#debb47 50%,rgba(36,142,36,0))}.ym_roll>div,.date_roll>div,.datetime_roll>div,.time_roll>div{font-size:1.9em;height:6em;float:left;background-color:transparent;position:relative;overflow:hidden;-webkit-box-flex:4}.ym_roll>div .gear,.date_roll>div .gear,.datetime_roll>div .gear,.time_roll>div .gear{width:100%;float:left;position:absolute;z-index:9902;margin-top:-6em}.date_roll_mask{-webkit-mask:-webkit-gradient(linear,0% 40%,0% 0%,from(#debb47),to(rgba(36,142,36,0)));-webkit-mask:-webkit-linear-gradient(bottom,#debb47 50%,rgba(36,142,36,0));padding:0 0 3em 0}.date_roll>div:nth-child(2){-webkit-box-flex:2}.date_roll>div:nth-child(1),.datetime_roll>div:nth-child(1){-webkit-box-flex:4}.datetime_roll>div:first-child{-webkit-box-flex:6}.datetime_roll>div:last-child{-webkit-box-flex:6}.date_grid{position:relative;top:2em;width:100%;height:2em;margin:0;box-sizing:border-box;z-index:0;border-top:1px solid #abaeb5;border-bottom:1px solid #abaeb5}.date_grid>div{color:#000;position:absolute;right:0;top:0;font-size:.8em;line-height:2.5em}.date_roll>div:nth-child(3) .date_grid>div{left:42%}.datetime_roll>div .date_grid>div{right:0}.datetime_roll>div:first-child .date_grid>div{left:auto;right:0%}.datetime_roll>div:last-child .date_grid>div{left:50%}.time_roll>div:nth-child(1) .date_grid>div{right:1em}.ym_roll>div:nth-child(1) .date_grid>div{right:.1em}.ym_roll>div .date_grid>div,.time_roll>div .date_grid>div{right:5em}.date_btn{color:#0575f2;font-size:1.6em;font-weight:bold;line-height:1em;text-align:center;padding:.8em 1em}.date_btn_box:before,.date_btn_box:after{content:"";position:absolute;height:1px;width:100%;display:block;background-color:#96979b;z-index:15;-webkit-transform:scaleY(0.33);transform:scaleY(0.33)}.date_btn_box{display:-webkit-box;-webkit-box-pack:justify;-webkit-box-align:stretch;background-color:#f1f2f4;position:relative}.date_btn_box:before{left:0;top:0;-webkit-transform-origin:50% 20%;transform-origin:50% 20%}.date_btn_box:after{left:0;bottom:0;-webkit-transform-origin:50% 70%;transform-origin:50% 70%}.date_roll>div:nth-child(1) .gear{text-indent:20%}.date_roll>div:nth-child(2) .gear{text-indent:-20%}.date_roll>div:nth-child(3) .gear{text-indent:-55%}.datetime_roll>div .gear{width:100%;text-indent:-25%}.datetime_roll>div:first-child .gear{text-indent:-10%}.datetime_roll>div:last-child .gear{text-indent:-50%}.ym_roll>div .gear,.time_roll>div .gear{width:100%;text-indent:-70%}.ym_roll>div:nth-child(1) .gear,.time_roll>div:nth-child(1) .gear{width:100%;text-indent:10%}.tooth{height:2em;line-height:2em;text-align:center}';
  36.     var cssEle = document.createElement("style");
  37.         cssEle.type = "text/css";
  38.         cssEle.appendChild(document.createTextNode(cssHtm));
  39.         document.getElementsByTagName("head")[0].appendChild(cssEle);
  40.        
  41.     MobileCalendar.prototype = {
  42.         init: function(params) {
  43.             this.type = params.type;
  44.             this.trigger = document.querySelector(params.trigger);
  45.             if (this.trigger.getAttribute("data-lcalendar") != null) {
  46.                 var arr = this.trigger.getAttribute("data-lcalendar").split(',');
  47.                 var minArr = arr[0].split('-');
  48.                 this.minY = ~~minArr[0];
  49.                 this.minM = ~~minArr[1];
  50.                 this.minD = ~~minArr[2];
  51.                 var maxArr = arr[1].split('-');
  52.                 this.maxY = ~~maxArr[0];
  53.                 this.maxM = ~~maxArr[1];
  54.                 this.maxD = ~~maxArr[2];
  55.             };
  56.             if (params.minDate) {
  57.                 var minArr = params.minDate.split('-');
  58.                 this.minY = ~~minArr[0];
  59.                 this.minM = ~~minArr[1];
  60.                 this.minD = ~~minArr[2];
  61.             };
  62.             if (params.maxDate) {
  63.                 var maxArr = params.maxDate.split('-');
  64.                 this.maxY = ~~maxArr[0];
  65.                 this.maxM = ~~maxArr[1];
  66.                 this.maxD = ~~maxArr[2];
  67.             };
  68.             this.onClose= params.onClose;
  69.             this.onSubmit= params.onSubmit;
  70.             this.onC//呼出日期插件
  71. e;
  72.             this.bindEvent(this.type);
  73.         },
  74.         bindEvent: function(type) {
  75.             var _self = this;
  76.             var isTouched = false , isMoved = false;
  77.             var pree;
  78.             //呼出日期插件
  79.             function popupDate(e) {
  80.                 _self.gearDate = document.createElement("div">取消</div>' +
  81.                    '<div class="rDate";
  82.                 _self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' +
  83.                     '<div class=">' +
  84.                    '<div class="'<div class="date_btn lcalendar_cancel">取消</div>' +
  85.                     '<div class="date_btn lcalendar_finish">确定</div>' +
  86.                     '</div>' +
  87.                     '<div class="date_roll_mask">' +
  88.                     '<div class="date_roll">' +
  89.                     '<div>' +
  90.                     '<div class="gear date_yy" data-datetype="date_yy"></div>' +
  91.                     '<div class="date_grid">' +
  92.                     '<div>å¹´</div>' +
  93.                     '</div>' +
  94.                     '</div>' +
  95.                     '<div>' +
  96.                     '<div class="gear date_mm" data-datetype="date_mm"></div>' +
  97.                     '<div class="date_grid">' +
  98.                     '<div>月</div>' +
  99.                     '</div>' +
  100.                     '</div>' +
  101.                     '<div>' +
  102.                     ' +
  103.                    '" data-datetype="date_dd"></div>' +
  104.                     '<div class="date_grid">' +
  105.                     '<div>æ—¥</div>' +
  106.                     '</div>' +
  107.                     '</div>' +
  108.                     '</div>' +
  109.                     '</div>' +
  110.                     '</div><div class="date_bg" style="width:100%;height:100%;"></div>';
  111.                 document.body.appendChild(_self.gearDate);
  112.                 dateCtrlInit();
  113.                 var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel");
  114.                 lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar);
  115.                 var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish");
  116.                 lcalendar_finish.addEventListener('touchstart', finishMobileDate);
  117.                 var lcalendar_bg = _self.gearDate.querySelector(".date_bg");
  118.                 lcalendar_bg.addEventListener('click', closeMobileCalendar);
  119.                 var date_yy = _self.gearDate.querySelector(".date_yy");
  120.                 var date_mm = _self.gearDate.querySelector(".date_mm");
  121.                 var date_dd = _self.gearDate.querySelector(".date_dd");
  122.                 date_yy.addEventListener('touchstart', gearTouchStart);
  123.                 date_mm.addEventListener('touchstart', gearTouchStart);
  124.                 date_dd.addEventListener('touchstart', gearTouchStart);
  125.                 date_yy.addEventListener('touchmove', gearTouchMove);
  126.                 date_mm.addEventListener('touchmove', gearTouchMove);
  127.                 da//-------------------------------------------------------------
  128.     date_yy.addEventListener('touchend', gearTouchEnd);
  129.                 date_mm.addEventListener('touchend', gearTouchEnd);
  130.                 date_dd.addEventListener('touchend', gearTouchEnd);
  131.                 //-------------------------------------------------------------
  132.                 lcalendar_cancel.addEventListener('click', closeMobileCalendar);
  133.                 lcalendar_finish.addEventListener('click', finishMobileDate);
  134.                 date_yy.addEventListener('mousedown', gearTouchStart);
  135.                 date_mm.addEventListener('mousedown'mousemove'hStart);
  136.                 date_dd.addEventListener('mousedown', gearTouchStart);
  137.                 date_yy.addEventListener('mousemove', gearTouchMove);
  138.                 date_mm.addEventListener('mousemove', gearTouchEnd);
  139.                _self.gearDate.querySelector(".date_roll_mask").addEventListener('     date_yy.addEventListener('mouseup', gearTouchEnd);
  140.                 date_mm.addEventListener('mouseup', gearTouchEnd);
  141.                 date_dd.addEventListen//初始化年月日插件默认值
  142.          _self.gearDate.querySelector(".date_roll_mask").addEventListener('mouseleave', gearTouchOut);
  143.                 _self.gearDate.querySelector(".date_roll_mask").addEventListener('mouseup', gearTouchOut);
  144.             }
  145.             //初始化年月日插件默认值
  146.             function dateCtrlInit() {
  147.                 var date = new Date();
  148.                 var dateArr = {
  149.                     yy: date.getYear(),
  150.                     mm: date.getMonth(),
  151.                     dd: date.getDate() - 1
  152.                 };
  153.                 if (       } else {
  154.          .test(_self.trigger.value)) {
  155.                     rs = _self.trigger.value.match(         _self.);
  156.                     dateArr.yy = rs[0] - _self.minY;
  157.                     dateArr.mm = rs[1].replace(ySel, "") - 1;
  158.                     dateArr.dd = rs[2].replace(    , "") - 1;
  159.                 } else {
  160.                     dateArr.yy = dateArr.yy + 1900 - _self.minY;
  161.                 }
  162.                 _self.//呼出年月插件
  163. r(".date_yy").setAttribute("val", dateArr.yy);
  164.                 _self.gearDate.querySelector(".date_mm").setAttribute("val", dateArr.mm);
  165.                 _self.gearDate.querySelector(".date_dd").setAttribute("val", dateArr.dd);
  166.                 setDateGearTooth();
  167.             }
  168.             //呼出年月插件
  169.             function popupYM(e) {
  170.                 _self.gearDate = document.createElement("div");
  171.                 _self.gearDate.className = "gearDate";
  172.                 _self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' +
  173.                     '<div class="date_btn_box">' +
  174.                     '<div class="date_btn lcalendar_cancel">取消</div>' +
  175.                     '<div class="date_btn lcalendar_finish">确定</div>' +
  176.                     '</div>' +
  177.                     '<div class="date_roll_mask">' +
  178.                     '<div class="ym_roll">' +
  179.                     '<div>' +
  180.                     '<div class="gear date_yy" data-datetype="date_yy"></div>' +
  181.                     '<div class="date_grid">' +
  182.                     '<div>å¹´</div>' +
  183.                     '</div>' +
  184.                     '</div>' +
  185.                     '<div>' +
  186.                     '<div class="gear date_mm" data-datetype="date_mm"></div>' +
  187.                     '<div class="date_grid">' +
  188.                     '<div>月</div>' +
  189.                     '</div>' +
  190.                     '</div>' +
  191.                     '</div>' +
  192.                     '</div>' +
  193.                     '</div><div class="date_bg" style="width:100%;height:100%;"></div>';
  194.                 document.body.appendChild(_self.gearDate);
  195.                 ymCtrlInit();
  196.                 var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel");
  197.                 lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar);
  198.                 var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish");
  199.                 lcalendar_finish.addEventListener('touchstart', finishMobileYM);
  200.                 var lcalendar_bg = _self.gearDate.querySelector(".date_bg");
  201.                 lcalendar_bg.addEventListener('click', closeMobileCalendar);
  202.                 var date_yy = _self.gearDate.querySelector(".date_yy");
  203.                 var date_mm = _self.gearDate.querySelector(".date_mm");
  204.                 date_yy.addEventListener('touchstart', gearTouchEnd);
  205.                //-------------------------------------------------------------
  206.                lcalendar_cancel.addEventListener('rTouchMove);
  207.                 date_mm.addEventListener('touchmove', gearTouchMove);
  208.                 date_yy.addEventListener('touchend', gearTouchEnd);
  209.                 date_mm.addEventListener('touchend', gearTouchEnd);
  210.                 //-------------------------------------------------------------
  211.                 lcalendar_cancel.addEventListener('click', closeMobileCalendar);
  212.                 lcalendar_finish.addEventListener('click', finishMobileYM);
  213.                 date_yy.addEventListener('mousedown', gearTouchStart);
  214.                 date_mm.addEventListener('mousedown', gearTouchStart);
  215.                 date_yy.addEventListener('mousemove', gearTouchMove);
  216.                 date_mm.addEventListener('mousemove', gearTouchMove);
  217.                 date_yy.add//初始化年月插件默认值
  218. hEnd);
  219.                 date_mm.addEventListener('mouseup', gearTouchEnd);
  220.                 _self.gearDate.querySelector(".date_roll_mask").addEventListener('mouseleave', gearTouchOut);
  221.                 _self.gearDate.querySelector(".date_roll_mask").addEventListener('mouseup', gearTouchOut);
  222.             }
  223.             //初始化年月插件默认值
  224.             function ymCtrlInit() {
  225.                 var date = new Date();
  226.                 var dateArr = {
  227.                     yy: date.getYear(),
  228.                     mm: date.getMonth()
  229.                 };
  230.                 if (".date_yy").setAt.test(_self.trigger.value)) {
  231.                     rs = _self.trigger.value.match(m").setAttribut);
  232.                     dateArr.yy = rs[0] - _self.minY;
  233.                     dateArr.//呼出日期+时间插件
  234.  - 1;
  235.                 } else {
  236.                     dateArr.yy = dateArr.yy + 1900 - _self.minY;
  237.                 }
  238.                 _self.gearDate.querySelector(".date_yy").setAttribute("val", dateArr.yy);
  239.                 _self.gearDate.querySelector(".date_mm").setAttribute("val", dateArr.mm);
  240.                 setDateGearTooth();
  241.             }
  242.             //呼出日期+时间插件
  243.             function popupDateTime(e) {
  244.                 _self.gearDate = document.createElement("date_roll_mask"        _self.gearDate.className = "gearDatetime";
  245.                 _self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' +
  246.                     '<div class="date_btn_box">' +
  247.                     '<div class="date_btn lcalendar_cancel">取消</div>' +
  248.                     '<div class="date_btn lcalendar_finish">确定</div>' +
  249.                     '</div>' +
  250.                     '<div class="date_roll_mask">' +
  251.                     '<div class="datetime_roll">' +
  252.                     '<div>' +
  253.                     '<div class="gear date_yy" data-datetype="date_yy"></div>' +
  254.                     '<div class="date_grid">' +
  255.                     '<div>å¹´</div>' +
  256.                     '</div>' +
  257.                     '</div>' +
  258.                     '<div>' +
  259.                     '<div class="gear date_mm" data-datetype="date_mm"></div>' +
  260.                     '<div class="date_grid">' +
  261.                     '<div>月</div>' +
  262.                    '</div>' +
  263.                     '</div>' +
  264.                     '<div>' +
  265.                     '<div class="gear date_dd" data-datetype="date_dd"></div>'<div>'                 '<div class="date_grid">' +
  266.                     '<div>æ—¥</div>' +
  267.                     '</div>' +
  268.                     '</div>' +
  269.                     '<div>' +
  270.                     '<div class="gear time_hh" data-datetype="time_hh"></div>' +
  271.    //date_roll
  272.      '<div class="date_grid">' //date_roll_mask
  273.      '<div>æ—¶</div>' +
  274.                     '</div>' +
  275.                     '</div>';
  276.                document.body.appendChild(_self.gearDate);
  277.                dateTimeCtrlInit();
  278.                var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel");
  279.                lcalendar_cancel.addEventListener('                  '</div>' +
  280.                     '</div>' + //date_roll
  281.                     '</div>' + //date_roll_mask
  282.                     '</div><div class="date_bg" style="width:100%;height:100%;"></div>';
  283.                 document.body.appendChild(_self.gearDate);
  284.                 dateTimeCtrlInit();
  285.                 var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel");
  286.                 lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar);
  287.                 var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish");
  288.                 lcalendar_finish.addEventListener('touchstart', finishMobileDateTime);
  289.                 var lcalendar_bg = _self.gearDate.querySelector(".date_bg");
  290.                 lcalendar_bg.addEventListener('click', closeMobileCalendar);
  291.                 var date_yy = _self.gearDate.querySelector(".date_yy");
  292.                 var date_mm = _self.gearDate.querySelector(".date_mm");
  293.                 var date_dd = _self.gearDate.querySelector(".date_dd");
  294.                 var time_hh = _self.gearDate.querySelector(".time_hh");
  295.                 var time_mm = _self.gearDate.querySelector(".time_mm");
  296.                 date_yy.addEventListener('touchstart', gearTouchStart);
  297.                 date_mm.addEventListener('touchstart', gearTouchStart);
  298.                 date_dd.addEventListener('touchstart', gearTouchStart);
  299.                 time_hh.addEventListener('touchstart', gearTouchStart);
  300.                 time_mm.addEventListener('touchstart', gearTouchStart);
  301.                 date_yy.addEventListener('touchmove', gearTouchMove);
  302.                 date_mm.addEventListener('touchmove', gearTouchMove);
  303.                 date_dd.addEventListener('touchmove', gearTouchMove);
  304.                 time_hh.addEventListener('touchmove//-------------------------------------------------------------
  305. chmove', gearTouchMove);
  306.                 date_yy.addEventListener('touchend', gearTouchEnd);
  307.                 date_mm.addEventListener('touchend', gearTouchEnd);
  308.                 date_dd.addEventListener('touchend', gearTouchEnd);
  309.                 time_hh.addEventListener('touchend', gearTouchEnd);
  310.                 time_mm.addEventListener('touchend', gearTouchEnd);
  311.                 //-------------------------------------------------------------
  312.                 lcalendar_cancel.addEventListener('click', closeMobileCalendar);
  313.                 lcalendar_finish.addEventListener('click', finishMobileDateTime);
  314.                 date_yy.addEventListener('mousedown', gearTouchStart);
  315.                 date_mm.addEventListener('mousedown', gearTouchStart);
  316.                 date_dd.addEventListener('mousedown', gearTouchStart);
  317.                 time_hh.addEventListener('mousedown', gearTouchStart);
  318.                 time_mm.addEventListener('mousedown', gearTouchStart);
  319.                 date_yy.addEventListener('mousemove', gearTouchMove);
  320.                 date_mm.addEventListener('mousemove', gearTouchMove);
  321.                 date_dd.addEventListener('mousemove', gearTouchMove);
  322.                 time_hh.addEventListener('mousemove', gearTouchMove);
  323.                 time_mm.addEventListener('mouseleave' gearTouchMove);
  324.                 date_yy.addEventListener('mouseup', gearTouchEnd);
  325.                 date_mm.addEventListener('mouseup', gearTouchEnd);//初始化年月日时分插件默认值
  326. 'mouseup', gearTouchEnd);
  327.                 time_hh.addEventListener('mouseup', gearTouchEnd);
  328.                 time_mm.addEventListener('mouseup', gearTouchEnd);
  329.                 _self.gearDate.querySelector(".date_roll_mask").addEventListener('mouseleave', gearTouchOut);
  330.                 _self.gearDate.querySelector(".date_roll_mask").addEventListener('mouseup', gearTouchOut);
  331.             }
  332.             //初始化年月日时分插件默认值
  333.             function dateTimeCtrlInit() {
  334.                 var date = new Date();
  335.                 var dateArr = {
  336.                     yy: date.getYear(),
  337.                     mm: date.getMonth(),
  338.                     dd: date.getDate() - 1,
  339.                     hh: date.getHours(),
  340.                     mi: date.getMinutes()
  341.                 };
  342.                 if (              dateArr.yy = dateArr.yy .test(_self.trigger.value)) {
  343.                     rs = _self.trigger.value.match(or(".date_yy").setAt);
  344.                     dateArr.yy = rs[0] - _self.minY;
  345.                     dateArr.mm = rs[1].replace(, da, "") - 1;
  346.                     dateArr.dd = rs[2].replace(date, "").setAttribute("           dateArr.hh = parseInt(rs[3].replace(ooth();, ""));
  347.                     dateArr.mi = parseInt(rs[4].replace(ribute, ""));
  348.                 } else {
  349.                     dateArr.yy = dateArr.yy + 1900 - _self.minY;
  350.                 }
  351.                 _self.gearDate.querySelector(".date_yy").//呼出时间插件
  352. ateArr.yy);
  353.                 _self.gearDate.querySelector(".date_mm").setAttribute("val", dateArr.mm);
  354.                 _self.gearDate.querySelector(".date_dd").setAttribute("val", dateArr.dd);
  355.                 setDateGearTooth();
  356.                 _self.gearDate.querySelector(".time_hh").setAttribute("val", dateArr.hh);
  357.                 _self.gearDate.querySelector(".time_mm").setAttribute("val", dateArr.mi);
  358.                 setTimeGearTooth();
  359.             }
  360.             //呼出时间插件
  361.             function popupTime(e) {
  362.                 _self.gearDate = document.createElement("div");
  363.                 _self.gearDate.className = "gearDate";
  364.                 _self.gearDate.innerHTML = '<div class=">' +
  365.                    '<div>æ—¶</div>' +
  366.                    '</div>' +
  367.                    '</div>' +
  368.                    '<div>' +
  369.                    '<div class="          '<div class="date_btn lcalendar_finish">确定</div>'<div class="date_grid">'</div>' +
  370.                     '<div class="date_roll_mask">' +
  371.                     '<div class="time_roll">' +
  372.                     ' + //time_roll
  373.                    'lass="gear time_hh" data-datetype="time_hh"></div>' +
  374.                     '<div class="date_grid">' +
  375.                     '<div>æ—¶</div>' +
  376.                     '</div>' +
  377.                     '</div>' +
  378.                     '<div>' +
  379.                     '<div class="gear time_mm" data-datetype="time_mm"></div>' +
  380.                     '<div class="date_grid">' +
  381.                     '<div>分</div>' +
  382.                     '</div>' +
  383.                     '</div>' +
  384.                     '</div>' + //time_roll
  385.                     '</div>' +
  386.                     '</div><div class="date_bg" style="width:100%;height:100%;"></div>';
  387.                 document.body.appendChild(_self.gearDate);
  388.                 timeCtrlInit();
  389.                 var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel");
  390.                 lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar);
  391.                 var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish");
  392.                 lcalendar_finish.addEventListener('touchstart', finishMobileTime);
  393.                 var lcalendar_bg = _self.gearDate.querySelector(".date_bg");
  394.                 lcalendar_bg.addEventListener('click', closeMobileCalendar);
  395.                 var time_hh = _self.gearDate.//-------------------------------------------------------------
  396. earDate.querySelector(".time_mm");
  397.                 time_hh.addEventListener('touchstart', gearTouchStart);
  398.                 time_mm.addEventListener('touchstart', gearTouchStart);
  399.                 time_hh.addEventListener('touchmove', gearTouchMove);
  400.                 time_mm.addEventListener('touchmove', gearTouchMove);
  401.                 time_hh.addEventListener('touchend', gearTouchEnd);
  402.                 time_mm.addEventListener('touchend', gearTouchEnd);
  403.                 //-------------------------------------------------------------
  404.                 lcalendar_cancel.addEventListener('click', closeMobileCalendar);
  405.                 lcalendar_finish.addEventListener('click', finishMobileTime);
  406.                 time_hh.addEventListener('mousedown', gearTouchStart);
  407.                 time_mm.addEventListener('mousedown',//初始化时分插件默认值
  408.  time_hh.addEventListener('mousemove', gearTouchMove);
  409.                 time_mm.addEventListener('mousemove', gearTouchMove);
  410.                 time_hh.addEventListener('mouseup', gearTouchEnd);
  411.                 time_mm.addEventListener('mouseup', gearTouchEnd);
  412.                 _self.gearDate.querySelector(".date_roll_mask").addEventListener('mouseleave', gearTouchOut);
  413.                 _self.gearDate.querySelector(".date_roll_mask").addEventListener('mouseup', gearTouchOut);
  414.             }
  415.             //初始化时分插件默认值
  416.             function timeCtrlInit() {
  417.                 var d = new Date();
  418.                 var e = {
  419.                     hh: d.getHou//重置日期节点个数
  420. m: d.getMinutes()
  421.                 };
  422.                 if ( var passY = _s.test(_self.trigger.value)) {
  423.                     rs = _self.trigger.value.match(ctor(".date_y);
  424.                     e.hh = parseInt(rs[0].replace(  if (, ""));
  425.                     e.mm = parseInt(rs[1].replace(    //, ""))
  426.                 }
  427.                 _self.gearDate.querySelector(".time_hh").setAttribute("val", e.hh);
  428.  //p 当前节点前后需要展示的节点个数
  429. _mm").setAttribute("val", e.mm);
  430.                 setTimeGearTooth();
  431.             }
  432.             //重置日期节点个数
  433.             function setDateGearTooth() {
  434.                 var passY = _self.maxY - _self.minY + 1;
  435.                 var date_yy = _self.gearDate.querySelector(".date_yy");
  436.                 var itemStr = "";
  437.                 if (date_yy && date_yy.getAttribute("val")) {
  438.                     //得到年份的值
  439.                     var yyVal = parseInt(date_yy.getAttribute("val"));
  440.                     //p 当前节点前后需要展示的节点个数
  441.                     for (var p = 0; p <= passY - 1; p++) {
  442.                         itemStr += "<div class='tooth'>" + (_self.minY + p) + "</div>";
  443.                     }
  444.                     date_yy.innerHTML = itemStr;
  445.                     var top = Math.floor(parseFloat(date_yy.getAttribute('top'em,0)'                   if (!isNaN(top)) {
  446.                         top % 2 == 0 ? (top = top) : (top = top + 1);
  447.                         top > 8 && (top = 8);
  448.                         var minTop = 8 - (passY - 1) * 2;
  449.                         top < minTop && (top = minTop);
  450.                         date_yy.style["-webkit-transform"] = 'translate3d(0,' + top + 'em,//得到月份的值
  451.         date_yy.setAttribute('top', top + 'em');
  452.                         yyVal = Math.abs(top - 8) / 2;
  453.                         date_yy.setAttribute("val", yyVa//当年份到达最大值
  454. lse {
  455.                         date_yy.style["-webkit-transform"] = 'translate3d(0,' + (8 - yyVal * 2) + 'em,0)';
  456.                       //当年份到达最小值
  457. ', 8 - yyVal * 2 + 'em');
  458.                     }
  459.                 } else {
  460.                     return;
  461.                 }
  462.         //p 当前节点前后需要展示的节点个数
  463. (".date_mm");
  464.                 if (date_mm && date_mm.getAttribute("val")) {
  465.                     itemStr = "";
  466.                     //得到月份的值
  467.                     var mmVal = parseInt(date_mm.getAttribute("val"));
  468.                     var maxM = 11;
  469.                     var minM = 0;
  470.                     //当年份到达最大值
  471.                     if (yyVal == passY - 1) {
  472.                         maxM = _self.maxM - 1;
  473.                     }
  474.                     //当年份到达最小值
  475.                     if (yyVal == 0) {
  476.                         minM = _self.minM - 1;
  477.                     }
  478.                     //p 当前节点前后需要展示的节点个数
  479.                     for (var p = 0; p < maxM - minM + 1; p++) {
  480.                         itemStr += "<div class='tooth'>" + (minM + p + 1) + "</div>";
  481.                    //得到日期的值
  482.   date_mm.innerHTML = itemStr;
  483.                     if (mmVal > maxM) {
  484.                     //返回月份的天数
  485.                   date_mm.setAttribute("val", mmVal);
  486.                     } else if//p 当前节点前后需要展示的节点个数
  487. maxM;
  488.                         date_mm.setAttribute("val", mmVal);
  489.                     }
  490.                //当年份月份到达最大值
  491. form"] = 'translate3d(0,' + (8 - (mmVal - minM) * 2) + 'em,0)';
  492.                     date_mm.setAttribute('top', 8 - (mmVal - minM) * 2 + 'em');
  493.                 } //当年、月到达最小值
  494. urn;
  495.                 }
  496.                 var date_dd = _self.gearDate.querySelector(".date_dd");
  497.                 if (date_dd && date_dd.getAttribute("val")) {
  498.                     itemStr = "";
  499.                     //得到日期的值
  500.                     var ddVal = parseInt(date_dd.getAttribute("val"));
  501.                     //返回月份的天数
  502.                     var maxMonthDays = calcDays(yyVal, mmVal);
  503.                     //p 当前节点前后需要展示的节点个数
  504.                     var maxD = maxMonthDays - 1;
  505.                     var minD = 0;
  506.                     //当年份月份到达最大值
  507.                     if (yyVal == passY - 1 && _self.maxM == mmVal + 1) {
  508.                         maxD = _self.maxD - 1;
  509.                     }
  510.                     //当年、月到//重置时间节点个数
  511.                    if (yyVal == 0 && _self.minM == mmVal + 1) {
  512.                         minD = _self.minD - 1;
  513.                     }
  514.                     for (var p = 0; p < maxD - minD + 1; p++) {
  515.                         itemStr += "<div class='tooth'>" + (minD + p + 1) + "</div>";
  516.                     }
  517.                     date_dd.innerHTML = itemStr;
  518.                     if (ddVal > maxD) {
  519.                         ddVal = maxD;
  520.                         date_dd.setAttribute("val", ddVal);
  521.                     } else if (ddVal < minD) {
  522.                         ddVal = minD;
  523.                         date_dd.setAttribute("val", ddVal);
  524.                     }
  525.                     date_dd.style["-webkit-transform"] = 'translate3d(0,' + (8 - (ddVal - minD) * 2) + 'em,0)';
  526.                     date_dd.setAttribute('top', 8 - (ddVal - minD) * 2 + 'em');
  527.                 } else {
  528.                     return;
  529.                 }
  530.             }
  531.             //重置时间节点个数
  532.             function setTimeGearTooth() {
  533.                 var time_hh = _self.gearDate.querySelector(".time_hh");
  534.                 if (time_hh && time_hh.getAttribute("val")) {
  535.                     var i = "";
  536.                     var hhVal = parseInt(time_hh.getAttribute("val"));
  537.                     for (var g = 0; g <= 23; g++) {
  538.                         i += "<div class='tooth'>" + g + "</di//求月份最大天数
  539.  }
  540.                     time_hh.innerHTML = i;
  541.                     time_hh.style["-webkit-transform"] = 'translate3d(0,' + (8 - hhVal * 2) + 'em,0)';
  542.                     time_hh.setAttribute('top', 8 - hhVal * 2 + 'em');
  543.                 } else {
  544.                     return
  545.                 }
  546.                 var time_mm = _self.gearDate.querySelector(".time_mm");
  547.                 if (time_mm && time_mm.getAttribute("val")) {
  548.                     var i = "";
  549.                     var mmVal = parseInt(time_mm.getAttribute("val"));
  550.                     for (var g = 0; g <= 59; g++) {
  551.                         i += "<div //触摸开始
  552.  + g + "</div>";
  553.                     }
  554.                     time_mm.innerHTML = i;
  555.                     time_mm.style["-webkit-transform"] = 'translate3d(0,' + (8 - mmVal * 2) + 'em,0)';
  556.                     time_mm.setAttribute('top', 8 - mmVal * 2 + 'em');
  557.                 } else {
  558.                     return
  559.                 }
  560.             }
  561.             //求月份最大天数
  562.             function calcDays(year, month) {
  563.                 if (month == 1) {
  564.                     year += _self.minY;
  565.                     if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0 && year % 4000 != 0)) {
  566.                         return 29;
  567.                     } else {
  568.                         return 28;
  569.                     }
  570.                 } else {
  571.                     if (month == 3 || month == 5 || month == 8 || month == 10) {
  572.                         return 30;
  573.                     } else {
  574.                         return 31;
  575.                     }
  576.                 }
  577.           //手指移动
  578.  //触摸开始
  579.             function gearTouchStart(e) {
  580.                 if (isMoved || isTouched) return;              
  581.                 isTouched = true;
  582.                 e.preventDefault();
  583.                 var target = e.target;
  584.                 while (true) {
  585.                     if (!target.classList.contains("gear")) {
  586.                         target = target.parentElement;
  587.                     } else {
  588.                         break
  589.                     }
  590.                 }
  591.                 clearInterval(target["int_" + target.id]);
  592.                 target["old_" + target.id] = e.targetTouches ? e.targetTouches[0].screenY : e.pageY;
  593.                 target//var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / target.clientHeight;
  594. p');
  595.                 if (top) {
  596.                     target["o_d_" + target.id] = parseFloat(top.replace(     , ""));
  597.                 } else {
  598.                     target["o_d_" + target.id] = 0;
  599.                 };
  600.                 pree=e;
  601.             }
  602.             //手指移动
  603.             function gearTouchMove(e) {
  604.                 if (!isTouched) return;
  605.                 is//离开屏幕
  606.                e.preventDefault();
  607.                 if(pree) var target = pree.target; else
  608.                 var target = e.target;
  609.                 while (true) {
  610.                     if (!target.classList.contains("gear")) {
  611.                         target = target.parentElement;
  612.                     } else {
  613.                         break
  614.                     }
  615.                 }
  616.                 target["new_" + target.id] = e.targetTouches ? e.targetTouches[0].screenY : e.pageY;
  617.                 target["n_t_" + target.id] = (new Date()).getTime();
  618.                 //var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / target.clientHeight;
  619.                 var f = (target["new_"n_t_"rget.id] - target["old_"o_t_"rget.id]) * 18 / 370;
  620.                 target["pos_" + target.id] = target["o_d_" + target.id] + f;
  621.                 target.style["-webkit-transform"] = 'translate3d(0,' + target["pos_" + target.id] + 'em,0)';
  622.                 target.setAttribute('top', target["pos_" + target.id] + 'em');
  623.             }
  624.             //离开屏幕
  625.             function gearTouchEnd(e) {
  626.                 if (!isTouched || !isMoved) {
  627.                     isTouched = isMoved = false;
  628.                     return;
  629.                 }
  630.                 isTouched = isMoved = false;
  631.                 e.preventDefault();
  632.                 if(pree) var tar//离开区域
  633. et; else
  634.                 var target = e.target;
  635.                 while (true) {
  636.                     //缓动效果
  637. ssList.contains("gear")) {
  638.                         target = target.parentElement;
  639.                     } else {
  640.                         break;
  641.                     }
  642.                 }
  643.                 var flag = (target["new_" + target.id] - target["old_" + target.id]) / (target["n_t_" + target.id] - target["o_t_" + target.id]);
  644.                 if (Math.abs(flag) <= 0.2) {
  645.                     target["spd_" + target.id] = (flag < 0 ? -0.08 : 0.08);
  646.                 } else {
  647.                     if (Math.abs(flag) <= 0.5) {
  648.                         target["spd_" + target.id] = (flag < 0 ? -0.16 : 0.16);
  649.                     } else {
  650.                         target["spd_" + target.id] = flag / 2;
  651.                     }
  652.                 }
  653.                 if (!target["pos_" + target.id]) {
  654.                     target["pos_" + target.id] = 0;
  655.                 }
  656.                 rollGear(target);
  657.                 pree=null;
  658.             };
  659.             //离开区域
  660.             function gearTouchOut(e) {
  661.                 gearTouchEnd(pree);
  662.             };
  663.             //缓动效果
  664.             function rollGear(target) {
  665.                 var d = 0;
  666.                 var stopGear = false;
  667.                 var passY = _self.maxY - _self.minY + 1;
  668.                 clearInterval(target["int_" + target.id]);
  669.                 target["int_" + target.id] = setInterval(function() {
  670.                     var pos = target["pos_" + target.id];
  671.                     var speed = target["spd_" + target.id] * Math.exp(-0.1 * d);
  672.                     pos += speed;
  673.                     if (Math.abs(speed) > 0.1) {} else {
  674.                         speed = 0.1;
  675.                         var b = Math.round(pos / 2) * 2;
  676.                         if (Math.abs(pos - b) < 0.05) {
  677.                             stopGear = true;
  678.                         } else {
  679.                             if (pos > b) {
  680.                              //得到年份的值
  681.                        } else {
  682.                                 pos += speed
  683.                             }
  684.                         }
  685.                     }
  686.                     if (pos > 8) {
  687.   //当年份到达最大值
  688.  8;
  689.                         stopGear = true;
  690.                     }
  691.                     switch (target.dataset.datetype) {
  692.                         case "date_yy":
  693.      //当年份到达最小值
  694. minTop = 8 - (passY - 1) * 2;
  695.                             if (pos < minTop) {
  696.                                 pos = minTop;
  697.                                 stopGear = true;
  698.                             }
  699.                             if (stopGear) {
  700.                                 var gearVal = Math.abs(pos - 8) / 2;
  701.                                 setGear(target, gearVal);
  702.                                 clearInterval(target["int_" + target.id]);
  703.                             }
  704.                             break;
  705.                         case "date_mm":
  706.                             var date_yy = _self.gearDate.querySelector(".date_yy");
  707.                             //得到年份的值
  708.                             var yyVal = parseInt(date_yy.getAttribute("val"));
  709.                             var maxM = 11;
  710.                             var minM = 0;
  711.                             //当年份//得到年份的值
  712. §å€¼
  713.                             if (yyVal == passY - 1) {
  714.                                 maxM = _se//得到月份的值
  715.                     }
  716.                             //当年份到达最小值
  717.    //返回月份的天数
  718.  if (yyVal == 0) {
  719.                                 minM = _self.minM - 1;
  720.                             }
  721.                             var minTop = 8 - (maxM - minM) * 2;
  722.                             if//当年份月份到达最大值
  723.                  pos = minTop;
  724.                                 stopGear = true;
  725.                             }
  726.                             if (stopGear) {
  727.                                 var gear//当年、月到达最小值
  728. minM;
  729.                                 setGear(target, gearVal);
  730.                                 clearInterval(target["int_" + target.id]);
  731.                             }
  732.                             break;
  733.                         case "date_dd":
  734.                             var date_yy = _self.gearDate.querySelector(".date_yy");
  735.                             var date_mm = _self.gearDate.querySelector(".date_mm");
  736.                             //得到年份的值
  737.                             var yyVal = parseInt(date_yy.getAttribute("val"));
  738.                             //得到月份的值
  739.                             var mmVal = parseInt(date_mm.getAttribute("val"));
  740.                             //返回月份的天数
  741.                             var maxMonthDays = calcDays(yyVal, mmVal);
  742.                             var maxD = maxMonthDays - 1;
  743.                             var minD = 0;
  744.                             //当年份月份到达最大值
  745.                             if (yyVal == passY - 1 && _self.maxM == mmVal + 1) {
  746.                                 maxD = _self.maxD - 1;
  747.                             }
  748.                             //当年、月到达最小值
  749.                             if (yyVal == 0 && _self.minM == mmVal + 1) {
  750.                                 minD = _self.minD - 1;
  751.                             }
  752.                             var minTop = 8 - (maxD - minD) * 2;
  753.                             if (pos < minTop) {
  754.                                 pos = minTop;
  755.                                 stopGear = true;
  756.                             }
  757.                             if (stopGear) {
  758.                                 var gearVal = Math.abs(pos - 8) / 2 + minD;
  759.                                 setGear(target, gearVal);
  760.                                 clearInterval(target["int_" + target.id]);
  761.                             }
  762.                             break;
  763.                         case "time_hh":
  764.                           //控制插件滚动后停留的值
  765.                pos = -38;
  766.                                 stopGear = true;
  767.                             }
  768.                             if (stopGear) {
  769.                                 var gearVal = Math.abs(pos - 8) / 2;
  770.                                 setGear(target, gearVal);
  771.                                 clearInterval(target["int_" + tar//取消
  772.  
  773.                             }
  774.                             break;
  775.                         case "time_mm":
  776.                             if (pos < -110) {
  777.                                 pos = -110;
  778.                                 stopGear = true;
  779.                             }
  780.                             if (stopGear) {
  781.                                 var gearVal = //日期确认
  782. 8) / 2;
  783.                                 setGear(target, gearVal);
  784.                                 clearInterval(target["int_" + target.id]);
  785.                             }
  786.                             break;
  787.                         default:
  788.                     }
  789.                     target["pos_".date_mm".id] = pos;
  790.                     target.style["-webkit-transform"] = 'translate3d(0,' + pos + 'em,0)';
  791.                     target.setAttribute('top', pos + 'em');
  792.                     d++;
  793.                 }, 30);
  794.             }
  795.             //控制插件滚动后停留的值
  796.             function setGear(target, val) {
  797.                 val = Math.round(val);
  798.                 target.setAttribute("val", val);
  799.                 if () _sel.test(target.dataset.datetype)) {
  800.                     setDateGearTooth();
  801.       //年月确认
  802. e {
  803.                     setTimeGearTooth();
  804.                 }
  805.             }
  806.             //取消
  807.             function closeMobileCalendar(e) {
  808.                 e.preventDefault();
  809.                 isTouched = isMoved = false;
  810.                 if(_self.onClose) _self.onClose();
  811.                 var evt = new CustomEvent('input');
  812.                 _self.trigger.dispatchEvent(evt);
  813.                 document.body.removeChild(_self.gearDate);
  814.             }
  815.             //日期确认
  816.             function finishMobileDate(e) {
  817.                 var passY = _self.maxY - _self.minY + 1;
  818.                 var date_yy = parseInt(Math.round(_sel//日期时间确认
  819. tor(".date_yy").getAttribute("val")));
  820.                 var date_mm = parseInt(Math.round(_self.gearDate.querySelector(".date_mm").getAttribute("val"))) + 1;
  821.                 date_mm = date_mm > 9 ? date_mm : '0' + date_mm;
  822.                 var date_dd = parseInt(Math.round(_self.gearDate.querySelector(".date_dd").getAttribute("))) + 1;
  823.                date_mm = date_mm > 9 ? date_mm : '0' + date_mm;
  824.                var date_dd = parseInt(Math.round(_self.gearDate.querySelector(" date_mm + "-" + date_dd;
  825.                 _self.value = _self.trigger.value;
  826.                 if(_self.onSubmit) _self.onSubmit();
  827.                 closeMobileCalendar(e);
  828.             }
  829.             //年月确认
  830.             function finishMobileYM(e) {
  831.                 var passY = _self.maxY - _self.minY + 1;
  832.                 var date_yy = parseInt(Math.round(_self.gearDate.querySelector(".date_yy").getAttribute("val")));
  833.                 var date_mm = parseInt(Math.round(_self.gearDate.querySelector(".date_mm").getAttribute("val"))) + 1;
  834.                 date_mm = date_mm > 9 ? date_mm : '0' + date_mm;
  835.                 _self.trigger.value = (date_yy % passY + _self.minY) + "-" + date_mm;
  836.                 _self.value = _self.trigger.value;
  837.                 if(_self.onSubmit) _self.onSubmit();
  838.                 close//时间确认
  839. e);
  840.             }
  841.             //日期时间确认
  842.             function finishMobileDateTime(e) {
  843.                 var passY = _self.maxY - _self.minY + 1;
  844.                 var date_yy = parseInt(Math.round(_self.gearDate.querySelector(".date_yy").getAttribute("val")));
  845.                 var date_mm = parseInt(Math.round(_self.gearDate.querySelector(".date_mm").getAttribute("val"))) + 1;
  846.                 date_mm = date_mm > 9 ? date_mm : '0' + date_mm;
  847.                 var date_dd = parseInt(Math.round(_self.gearDate.querySelector(".date_dd").getAttribute("val"))) + 1;
  848.                 date_dd = date_dd > 9 ? date_dd : '0' + date_dd;
  849.                 var time_hh = parseInt(Math.round(_self.gearDate.querySelector(".time_hh").getAttribute("val")));
  850.                 time_hh = time_hh > 9 ? time_hh : '0' + time_hh;
  851.                 var time_mm = parseInt(Math.round(_self.gearDate.querySelector(".time_mm").getAttribute("val")));
  852.    

Raw Paste


Login or Register to edit or fork this paste. It's free.