Html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兼容ie9+</title> <link href="calendar.css" rel="stylesheet" type="text/css" /> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script src="rili_ie9.js" type="text/javascript"></script> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ margin-top: 200px; } </style> </head> <body> <div class="box"> 出生日期:<input type="text" id="birthday" data-input-id="b_input" class="Js_date input public_icon_sel" data-type="1" value="" placeholder="请选择日期" data-date="2018-4-11"><input type="hidden" name="birthday" id="b_input" value="2018-4-11"> </div> <script type="text/javascript"> $(function(){ // 农历日历选择插件 if ($(‘.Js_date‘).length > 0) { for(var i=0,max=$(‘.Js_date‘).length;i<max;i++){ var calendar1 = new lCalendar().init(‘#‘+$(‘.Js_date‘).eq(i).attr(‘id‘)); } } }); </script> </body> </html>
calendar.css:
.gearDate {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: #F0F0F0;border:1px solid #a5a5a5;border-radius: 5px;color: #363837;margin: 0;height: auto;width: 90%;max-width: 600px;position: absolute;left: 50%;top: 12%;z-index: 9902;overflow: hidden;-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-moz-transform: translate(-50%, 0);} .slideInUp {animation: slideInUp .3s ease-in;-webkit-animation: slideInUp .3s ease-in} @-webkit-keyframes slideInUp { from {-webkit-transform: translate(-50%, -100%);transform: translate(-50%, -100%);-moz-transform: translate(-50%, -100%);-ms-transform: translate(-50%, -100%);-o-transform: translate(-50%, -100%)} to {-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);-moz-transform: translate(-50%,0);-o-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0)} } .date_roll {position: relative;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));} .date_roll>div{font-size: 2.3em;height: 6em;float: left;background-color: transparent;position: relative;overflow: hidden;width: 33.33%;} .date_roll_mask {padding:0 2em;-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));} .date_grid {position: relative;top: 2em;width: 100%;height: 2em;margin: 0;box-sizing: border-box;z-index: 0;background-color: #E8E8E8;border-top: 1px solid #d4d4d4;border-bottom: 1px solid #d4d4d4;} .date_grid>div {color: #000;position: absolute;right: 0;top: 0;font-size: .8em;line-height: 2.5em} .date_info_box{color: #000;font-size: 1.8em;text-align: center;padding: .6em 1em;text-align: center;border-bottom: 1px solid #d4d4d4;font-weight: 700;} .date_class_box{text-align: center;padding:1em 2em;} .date_class{display: inline-block;font-size: 1.4em;width:40%;padding:.4em 0;text-align: center;color: #FE5B00;border:1px solid #FE5B00;cursor: pointer;} .date_class_box .date_class:first-child{border-top-left-radius: .2em;border-bottom-left-radius: .2em} .date_class_box .date_class:last-child{border-top-right-radius: .2em;border-bottom-right-radius: .2em} .date_class_box .active{background-color: #FE5B00;color: #fff} .date_btn_box {overflow: hidden;position: relative;border-top:1px solid #d4d4d4;} .date_btn {color: #000;font-size: 1.6em;line-height: 1em;text-align: center;padding: .8em 1em;cursor: pointer;float: left;width: 50%;box-sizing: border-box;} .date_btn:first-child{border-right:1px solid #d4d4d4;} .gear {float: left;position: absolute;z-index: 9902;width: 5.5em;margin-top: -6em;cursor: pointer;} .date_roll>div .gear {width: 100%} .tooth {height: 2em;line-height: 2em;text-align: center}
JS代码:
/* * lCalendar 农历公历-日历控件 * * 作者:羯瑞 * * 邮箱:[email protected] * * Copyright 2016 * * 创建于:2016-12-31 * * <p>注:1940-2-8至2018-12-31</p> <p>data-type</p> <p>默认:1; 农历_1, 公历_0</p> <p>data-date</p> <p>默认:当前时间;例:2017-02-09</p> <p>data-input-id</p> <p>默认:空;需要赋值的input id</p> */ window.lCalendar = (function() { if (!("classList" in document.documentElement)) { Object.defineProperty(HTMLElement.prototype, ‘classList‘, { get: function() { var self = this; function update(fn) { return function(value) { var classes = self.className.split(/\s+/g), index = classes.indexOf(value); fn(classes, index, value); self.className = classes.join(" "); } } return { add: update(function(classes, index, value) { if (!~index) classes.push(value); }), remove: update(function(classes, index) { if (~index) classes.splice(index, 1); }), toggle: update(function(classes, index, value) { if (~index) classes.splice(index, 1); else classes.push(value); }), contains: function(value) { return !!~self.className.split(/\s+/g).indexOf(value); }, item: function(i) { return self.className.split(/\s+/g)[i] || null; } }; } }); } var MobileCalendar = function() { this.gearDate; this.minY = 1940; this.minM = 1, this.minD = 1, this.maxY = 2018, this.maxM = 12, this.maxD = 31, this.type = 1 //0公历,1农历 } MobileCalendar.prototype = { init: function(id) { this.trigger = document.querySelector(id); this.bindEvent(‘date‘); }, bindEvent: function(type) { var _self = this; // 农历数据 var LunarCal = [ new tagLunarCal(38, 0, 0, 38, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1), /* 1940 */ new tagLunarCal(26, 6, 2, 44, 1, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0), new tagLunarCal(45, 0, 3, 49, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0), new tagLunarCal(35, 0, 4, 54, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1), new tagLunarCal(24, 4, 5, 59, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1), /* 1944 */ new tagLunarCal(43, 0, 0, 5, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1), new tagLunarCal(32, 0, 1, 10, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1), new tagLunarCal(21, 2, 2, 15, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1), new tagLunarCal(40, 0, 3, 20, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1), /* 1948 */ new tagLunarCal(28, 7, 5, 26, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1), new tagLunarCal(47, 0, 6, 31, 0, 1, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1), new tagLunarCal(36, 0, 0, 36, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0), new tagLunarCal(26, 5, 1, 41, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1), /* 1952 */ new tagLunarCal(44, 0, 3, 47, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1), new tagLunarCal(33, 0, 4, 52, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0), new tagLunarCal(23, 3, 5, 57, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1), new tagLunarCal(42, 0, 6, 2, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1), /* 1956 */ new tagLunarCal(30, 8, 1, 8, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0), new tagLunarCal(48, 0, 2, 13, 1, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0), new tagLunarCal(38, 0, 3, 18, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1), new tagLunarCal(27, 6, 4, 23, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0), /* 1960 */ new tagLunarCal(45, 0, 6, 29, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0), new tagLunarCal(35, 0, 0, 34, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1), new tagLunarCal(24, 4, 1, 39, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0), new tagLunarCal(43, 0, 2, 44, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0), /* 1964 */ new tagLunarCal(32, 0, 4, 50, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1), new tagLunarCal(20, 3, 5, 55, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0), new tagLunarCal(39, 0, 6, 0, 1, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1, 0), new tagLunarCal(29, 7, 0, 5, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1), /* 1968 */ new tagLunarCal(47, 0, 2, 11, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1), new tagLunarCal(36, 0, 3, 16, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0), new tagLunarCal(26, 5, 4, 21, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1), new tagLunarCal(45, 0, 5, 26, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1), /* 1972 */ new tagLunarCal(33, 0, 0, 32, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1), new tagLunarCal(22, 4, 1, 37, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1), new tagLunarCal(41, 0, 2, 42, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1), new tagLunarCal(30, 8, 3, 47, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1), /* 1976 */ new tagLunarCal(48, 0, 5, 53, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1), new tagLunarCal(37, 0, 6, 58, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1), new tagLunarCal(27, 6, 0, 3, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0), new tagLunarCal(46, 0, 1, 8, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0), /* 1980 */ new tagLunarCal(35, 0, 3, 14, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1), new tagLunarCal(24, 4, 4, 19, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1), new tagLunarCal(43, 0, 5, 24, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1), new tagLunarCal(32, 10, 6, 29, 1, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1), /* 1984 */ new tagLunarCal(50, 0, 1, 35, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0), new tagLunarCal(39, 0, 2, 40, 0, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1), new tagLunarCal(28, 6, 3, 45, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 0), new tagLunarCal(47, 0, 4, 50, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1), /* 1988 */ new tagLunarCal(36, 0, 6, 56, 1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0), new tagLunarCal(26, 5, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 1), new tagLunarCal(45, 0, 1, 6, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0), new tagLunarCal(34, 0, 2, 11, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0), /* 1992 */ new tagLunarCal(22, 3, 4, 17, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0), new tagLunarCal(40, 0, 5, 22, 1, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0), new tagLunarCal(30, 8, 6, 27, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1), new tagLunarCal(49, 0, 0, 32, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1), /* 1996 */ new tagLunarCal(37, 0, 2, 38, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1), new tagLunarCal(27, 5, 3, 43, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 1), new tagLunarCal(46, 0, 4, 48, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1), /* 1999 */ new tagLunarCal(35, 0, 5, 53, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1), /* 2000 */ new tagLunarCal(23, 4, 0, 59, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1), new tagLunarCal(42, 0, 1, 4, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1), new tagLunarCal(31, 0, 2, 9, 1, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0), new tagLunarCal(21, 2, 3, 14, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1), /* 2004 */ new tagLunarCal(39, 0, 5, 20, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1), new tagLunarCal(28, 7, 6, 25, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1), new tagLunarCal(48, 0, 0, 30, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1), new tagLunarCal(37, 0, 1, 35, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1), /* 2008 */ new tagLunarCal(25, 5, 3, 41, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1), new tagLunarCal(44, 0, 4, 46, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1), new tagLunarCal(33, 0, 5, 51, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1), new tagLunarCal(22, 4, 6, 56, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0), /* 2012 */ new tagLunarCal(40, 0, 1, 2, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0), new tagLunarCal(30, 9, 2, 7, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1), new tagLunarCal(49, 0, 3, 12, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1), new tagLunarCal(38, 0, 4, 17, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0), /* 2016 */ new tagLunarCal(27, 6, 6, 23, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1), new tagLunarCal(46, 0, 0, 28, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0), new tagLunarCal(35, 0, 1, 33, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0), new tagLunarCal(24, 4, 2, 38, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1), /* 2020 */ new tagLunarCal(42, 0, 4, 44, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1), new tagLunarCal(31, 0, 5, 49, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0), new tagLunarCal(21, 2, 6, 54, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1), new tagLunarCal(40, 0, 0, 59, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1), /* 2024 */ new tagLunarCal(28, 6, 2, 5, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0), new tagLunarCal(47, 0, 3, 10, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1), new tagLunarCal(36, 0, 4, 15, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1), new tagLunarCal(25, 5, 5, 20, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0), /* 2028 */ new tagLunarCal(43, 0, 0, 26, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1), new tagLunarCal(32, 0, 1, 31, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0) ]; //呼出日期插件 function popupDate(e) { document.activeElement.blur();//阻止获得焦点 _self.gearDate = document.createElement("div"); _self.gearDate.className = "gearDate"; _self.gearDate.innerHTML = ‘<div class="date_ctrl slideInUp">‘ + ‘<div class="date_info_box lcalendar_info">2016年12月29日‘ + ‘</div>‘ + ‘<div class="date_class_box">‘ + ‘<div class="date_class lcalendar_gongli">公历</div>‘ + ‘<div class="date_class lcalendar_nongli">农历</div>‘ + ‘</div>‘ + ‘<div class="date_roll_mask">‘ + ‘<div class="date_roll">‘ + ‘<div>‘ + ‘<div class="gear date_yy" data-datetype="date_yy"></div>‘ + ‘<div class="date_grid">‘ + ‘</div>‘ + ‘</div>‘ + ‘<div>‘ + ‘<div class="gear date_mm" data-datetype="date_mm"></div>‘ + ‘<div class="date_grid">‘ + ‘</div>‘ + ‘</div>‘ + ‘<div>‘ + ‘<div class="gear date_dd" data-datetype="date_dd"></div>‘ + ‘<div class="date_grid">‘ + ‘</div>‘ + ‘</div>‘ + ‘</div>‘ + ‘</div>‘ + ‘<div class="date_btn_box">‘ + ‘<div class="date_btn lcalendar_finish">确定</div>‘ + ‘<div class="date_btn lcalendar_cancel">取消</div>‘ + ‘</div>‘ + ‘</div>‘; document.body.appendChild(_self.gearDate); dateCtrlInit(); var hasTouch=‘ontouchstart‘ in window; var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel"); lcalendar_cancel.addEventListener(hasTouch?‘touchstart‘:‘click‘, closeMobileCalendar); var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish"); lcalendar_finish.addEventListener(hasTouch?‘touchstart‘:‘click‘, finishMobileDate); var lcalendar_gongli = _self.gearDate.querySelector(".lcalendar_gongli"); var lcalendar_nongli = _self.gearDate.querySelector(".lcalendar_nongli"); lcalendar_gongli.addEventListener(hasTouch?‘touchstart‘:‘click‘, function(){convertTap(‘gongli‘)},false); lcalendar_nongli.addEventListener(hasTouch?‘touchstart‘:‘click‘, function(){convertTap(‘nongli‘)},false); var date_yy = _self.gearDate.querySelector(".date_yy"); var date_mm = _self.gearDate.querySelector(".date_mm"); var date_dd = _self.gearDate.querySelector(".date_dd"); date_yy.addEventListener(‘touchstart‘, gearTouchStart); date_mm.addEventListener(‘touchstart‘, gearTouchStart); date_dd.addEventListener(‘touchstart‘, gearTouchStart); date_yy.addEventListener(‘mousedown‘, gearMouseSlide); date_mm.addEventListener(‘mousedown‘, gearMouseSlide); date_dd.addEventListener(‘mousedown‘, gearMouseSlide); date_yy.addEventListener(‘touchmove‘, gearTouchMove); date_mm.addEventListener(‘touchmove‘, gearTouchMove); date_dd.addEventListener(‘touchmove‘, gearTouchMove); date_yy.addEventListener(‘touchend‘, gearTouchEnd); date_mm.addEventListener(‘touchend‘, gearTouchEnd); date_dd.addEventListener(‘touchend‘, gearTouchEnd); // 阻止鼠标滚轮事件 if(navigator.userAgent.indexOf("Firefox")>0){ _self.gearDate.addEventListener(‘DOMMouseScroll‘,function(e){e.preventDefault();},false); date_yy.addEventListener(‘DOMMouseScroll‘, gearMouseRolling , false); date_mm.addEventListener(‘DOMMouseScroll‘, gearMouseRolling , false); date_dd.addEventListener(‘DOMMouseScroll‘, gearMouseRolling , false); }else{ _self.gearDate.onmousewheel = function(e){ return false}; date_yy.onmousewheel=gearMouseRolling; date_mm.onmousewheel=gearMouseRolling; date_dd.onmousewheel=gearMouseRolling; } } // 公历农历选择 function convertTap(type){ var nongli=_self.gearDate.querySelector(".lcalendar_nongli"); var gongli=_self.gearDate.querySelector(".lcalendar_gongli"); var changeOn=0; if(type==‘nongli‘ && _self.type !=1){ nongli.className=nongli.className.replace(/active/, "").replace(/(^\s*)|(\s*$)/g, "")+‘ active‘; gongli.className=gongli.className.replace(/active/, ""); _self.type=1; changeOn=1; }else if(type==‘gongli‘ && _self.type !=0){ nongli.className=nongli.className.replace(/active/, ""); gongli.className=gongli.className.replace(/active/, "").replace(/(^\s*)|(\s*$)/g, "")+‘ active‘; _self.type=0; changeOn=1; } //判断是否切换 if(changeOn){ var passY = _self.maxY - _self.minY + 1; var val_yy = parseInt(Math.round(_self.gearDate.querySelector(".date_yy").getAttribute("val"))); var date_mm = parseInt(Math.round(_self.gearDate.querySelector(".date_mm").getAttribute("val"))) + 1; var date_dd = parseInt(Math.round(_self.gearDate.querySelector(".date_dd").getAttribute("val"))) + 1; var date_yy=val_yy % passY + _self.minY; var type=_self.type?0:1; // 农历转公历前判断是否有闰月 var rmNum=LunarCal[val_yy].Intercalation?LunarCal[val_yy].Intercalation:0; if(!_self.type && rmNum){ if(rmNum==(date_mm-1)){ date_mm=-(date_mm-1); }else if(rmNum<(date_mm-1)){ date_mm=date_mm-1; }else{ date_mm=date_mm; } } var objDate=calendarConvert(type,date_yy,date_mm,date_dd);//返回转换对象 // 公历转农历后判断是否有闰月 var rmTip=LunarCal[objDate.yy - _self.minY].Intercalation?LunarCal[objDate.yy - _self.minY].Intercalation:0; if(rmTip && _self.type){ if(objDate.mm<0){ objDate.mm=-objDate.mm+1 }else if(objDate.mm>rmTip){ objDate.mm=objDate.mm+1; } } _self.gearDate.querySelector(".date_yy").setAttribute("val", objDate.yy - _self.minY); _self.gearDate.querySelector(".date_mm").setAttribute("val", objDate.mm-1); _self.gearDate.querySelector(".date_dd").setAttribute("val", objDate.dd-1); _self.gearDate.querySelector(".date_yy").setAttribute("top", ‘‘); setDateGearTooth(); } } //初始化年月日插件默认值 function dateCtrlInit() { var date = new Date(); var dateArr = { yy: date.getYear(), mm: date.getMonth(), dd: date.getDate() - 1 }; if (/^\d{4}-\d{1,2}-\d{1,2}$/.test(_self.trigger.getAttribute(‘data-date‘))) { rs = _self.trigger.getAttribute(‘data-date‘).match(/(^|-)\d{1,4}/g); dateArr.yy = rs[0] - _self.minY; dateArr.mm = rs[1].replace(/-/g, "") - 1; dateArr.dd = rs[2].replace(/-/g, "") - 1; } else { dateArr.yy = dateArr.yy + 1900 - _self.minY; }; _self.gearDate.querySelector(".date_yy").setAttribute("val", dateArr.yy); _self.gearDate.querySelector(".date_mm").setAttribute("val", dateArr.mm); _self.gearDate.querySelector(".date_dd").setAttribute("val", dateArr.dd); // 默认农历或公历 if(parseInt(_self.trigger.getAttribute(‘data-type‘))){ _self.type=1; var nongli=_self.gearDate.querySelector(".lcalendar_nongli"); nongli.className=nongli.className.replace(/active/, "").replace(/(^\s*)|(\s*$)/g, "")+‘ active‘; var passY = _self.maxY - _self.minY + 1; var date_yy=dateArr.yy % passY + _self.minY; var date_mm=dateArr.mm+1; var date_dd=dateArr.dd+1; var objDate=calendarConvert(0,date_yy,date_mm,date_dd);//返回转换对象 if(objDate.mm<0) objDate.mm=-objDate.mm+1;//返回的负数为 闰年 _self.gearDate.querySelector(".date_yy").setAttribute("val", objDate.yy - _self.minY); _self.gearDate.querySelector(".date_mm").setAttribute("val", objDate.mm-1); _self.gearDate.querySelector(".date_dd").setAttribute("val", objDate.dd-1); }else{ _self.type=0; var gongli=_self.gearDate.querySelector(".lcalendar_gongli"); gongli.className=gongli.className.replace(/active/, "").replace(/(^\s*)|(\s*$)/g, "")+‘ active‘; } setDateGearTooth(); } //重置日期节点个数+设置日期 function setDateGearTooth() { var passY = _self.maxY - _self.minY + 1; var date_yy = _self.gearDate.querySelector(".date_yy"); var itemStr = ""; if (date_yy && date_yy.getAttribute("val")) { //得到年份的值 var yyVal = parseInt(date_yy.getAttribute("val")); //p 当前节点前后需要展示的节点个数 for (var p = 0; p <= passY - 1; p++) { itemStr += "<div class=‘tooth‘>" + (_self.minY + p) + "</div>"; } date_yy.innerHTML = itemStr; var top = Math.floor(parseFloat(date_yy.getAttribute(‘top‘))); if (!isNaN(top)) { top % 2 == 0 ? (top = top) : (top = top + 1); top > 8 && (top = 8); var minTop = 8 - (passY - 1) * 2; top < minTop && (top = minTop); date_yy.style["transform"] = ‘translate(0,‘ + top + ‘em)‘; date_yy.style["-webkit-transform"] = ‘translate(0,‘ + top + ‘em)‘; date_yy.style["-moz-transform"] = ‘translate(0,‘ + top + ‘em)‘; date_yy.style["-ms-transform"] = ‘translate(0,‘ + top + ‘em)‘; date_yy.style["-o-transform"] = ‘translate(0,‘ + top + ‘em)‘; date_yy.setAttribute(‘top‘, top + ‘em‘); yyVal = Math.abs(top - 8) / 2; date_yy.setAttribute("val", yyVal); } else { date_yy.style["transform"] = ‘translate(0,‘ + (8 - yyVal * 2) + ‘em)‘; date_yy.style["-webkit-transform"] = ‘translate(0,‘ + (8 - yyVal * 2) + ‘em)‘; date_yy.style["-moz-transform"] = ‘translate(0,‘ + (8 - yyVal * 2) + ‘em)‘; date_yy.style["-ms-transform"] = ‘translate(0,‘ + (8 - yyVal * 2) + ‘em)‘; date_yy.style["-o-transform"] = ‘translate(0,‘ + (8 - yyVal * 2) + ‘em)‘; date_yy.setAttribute(‘top‘, (8 - yyVal * 2) + ‘em‘); } } else { return; } var date_mm = _self.gearDate.querySelector(".date_mm"); if (date_mm && date_mm.getAttribute("val")) { itemStr = ""; //得到月份的值 var mmVal = parseInt(date_mm.getAttribute("val")); // 判断否有闰月 var rmNum=LunarCal[yyVal].Intercalation?LunarCal[yyVal].Intercalation:0; if(rmNum && _self.type){ var maxM = 12; }else{ var maxM = 11; } var minM = 0; //当年份到达最大值 if (yyVal == passY - 1) { if(_self.type){ maxM = _self.maxM - 2; }else{ maxM = _self.maxM - 1; } // maxM = _self.maxM - 1; } //当年份到达最小值 if (yyVal == 0) { if(_self.type){ minM = _self.minM - 1; }else{ minM = _self.minM; } // minM = _self.minM - 1; } //p 当前节点前后需要展示的节点个数 for (var p = 0; p < maxM - minM + 1; p++) { var strVal=minM + p + 1; // 农历 if(_self.type){ // 闰月 if(rmNum && rmNum==p){ strVal=getChinese(‘rm‘,strVal-1); }else if(rmNum && rmNum<p){ strVal=getChinese(‘mm‘,strVal-1); }else{ strVal=getChinese(‘mm‘,strVal); } } itemStr += "<div class=‘tooth‘>" + strVal + "</div>"; } date_mm.innerHTML = itemStr; if (mmVal > maxM) { mmVal = maxM; date_mm.setAttribute("val", mmVal); } else if (mmVal < minM) { mmVal = maxM; date_mm.setAttribute("val", mmVal); } date_mm.style["transform"] = ‘translate(0,‘ + (8 - (mmVal - minM) * 2) + ‘em)‘; date_mm.style["-webkit-transform"] = ‘translate(0,‘ + (8 - (mmVal - minM) * 2) + ‘em)‘; date_mm.style["-moz-transform"] = ‘translate(0,‘ + (8 - (mmVal - minM) * 2) + ‘em)‘; date_mm.style["-ms-transform"] = ‘translate(0,‘ + (8 - (mmVal - minM) * 2) + ‘em)‘; date_mm.style["-o-transform"] = ‘translate(0,‘ + (8 - (mmVal - minM) * 2) + ‘em)‘; date_mm.setAttribute(‘top‘, 8 - (mmVal - minM) * 2 + ‘em‘); } else { return; } var date_dd = _self.gearDate.querySelector(".date_dd"); if (date_dd && date_dd.getAttribute("val")) { itemStr = ""; //得到日期的值 var ddVal = parseInt(date_dd.getAttribute("val")); //返回月份的天数 var maxMonthDays = calcDays(yyVal, mmVal); // console.log(yyVal+‘,‘+mmVal+‘,‘+maxMonthDays); //p 当前节点前后需要展示的节点个数 var maxD = maxMonthDays - 1; var minD = 0; //当年份月份到达最大值 if (yyVal == passY - 1 && 11 == mmVal + 1) { if(_self.type){ maxD = _self.maxD - 7; }else{ maxD = _self.maxD - 2; } // maxD = _self.maxD - 1; } //当年、月到达最小值 if (yyVal == 0 && 2 == mmVal + 1) { if(_self.type){ minD = _self.minD -1; }else{ minD = _self.minD + 6; } } for (var p = 0; p < maxD - minD + 1; p++) { var strVal=_self.type?getChinese(‘dd‘,minD + p + 1):(minD + p + 1); itemStr += "<div class=‘tooth‘>" + strVal + "</div>"; } date_dd.innerHTML = itemStr; if (ddVal > maxD) { ddVal = maxD; date_dd.setAttribute("val", ddVal); } else if (ddVal < minD) { ddVal = minD; date_dd.setAttribute("val", ddVal); } date_dd.style["transform"] = ‘translate(0,‘ + (8 - (ddVal - minD) * 2) + ‘em)‘; date_dd.style["-webkit-transform"] = ‘translate(0,‘ + (8 - (ddVal - minD) * 2) + ‘em)‘; date_dd.style["-moz-transform"] = ‘translate(0,‘ + (8 - (ddVal - minD) * 2) + ‘em)‘; date_dd.style["-ms-transform"] = ‘translate(0,‘ + (8 - (ddVal - minD) * 2) + ‘em)‘; date_dd.style["-o-transform"] = ‘translate(0,‘ + (8 - (ddVal - minD) * 2) + ‘em)‘; date_dd.setAttribute(‘top‘, 8 - (ddVal - minD) * 2 + ‘em‘); } else { return; } getCalendarDate();//设置日期 } //求月份最大天数 function calcDays(year, month) { // 农历查询数据 if(_self.type==1){ if(LunarCal[year].MonthDays[month]){ return 30; }else{ return 29; } }else{ if (month == 1) { year += _self.minY; if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0 && year % 4000 != 0)) { return 29; } else { return 28; } } else { if (month == 3 || month == 5 || month == 8 || month == 10) { return 30; } else { return 31; } } } } // 中文转换,type:rm闰月,mm月份,dd日期,num值 function getChinese(type,num){ var rmArr=[‘闰正月‘,‘闰二月‘,‘闰三月‘,‘闰四月‘,‘闰五月‘,‘闰六月‘,‘闰七月‘,‘闰八月‘,‘闰九月‘,‘闰十月‘,‘闰冬月‘,‘闰腊月‘]; var mmArr=[‘正月‘,‘二月‘,‘三月‘,‘四月‘,‘五月‘,‘六月‘,‘七月‘,‘八月‘,‘九月‘,‘十月‘,‘十一月‘,‘十二月‘]; var ddArr=[‘初一‘,‘初二‘,‘初三‘,‘初四‘,‘初五‘,‘初六‘,‘初七‘,‘初八‘,‘初九‘,‘初十‘,‘十一‘,‘十二‘,‘十三‘,‘十四‘,‘十五‘,‘十六‘,‘十七‘,‘十八‘,‘十九‘,‘二十‘,‘廿一‘,‘廿二‘,‘廿三‘,‘廿四‘,‘廿五‘,‘廿六‘,‘廿七‘,‘廿八‘,‘廿九‘,‘三十‘,‘三十一‘]; if(type==‘rm‘) return rmArr[num-1]; if(type==‘mm‘) return mmArr[num-1]; if(type==‘dd‘) return ddArr[num-1]; } /** * 公历农历转换 * M=0公历到农历,M=1农历到公历 * date_yy:年 * date_mm:月,闰月为 负数 * date_dd:日 */ function calendarConvert(M,date_yy,date_mm,date_dd){ var year = date_yy; var month = date_mm; var date = date_dd; var FIRSTYEAR = 1940;//最小年份 var LASTYEAR = 2030;//最大年份 //西曆年每月之日數 var SolarCal = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //西曆年每月之累積日數, 平年與閏年 var SolarDays = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334, 365, 396,0, 31, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335, 366, 397]; //公历转农历 if (M == 0) { var SolarYear = parseInt(year); var SolarMonth = parseInt(month); var SolarDate = parseInt(date); var sm = SolarMonth - 1; var leap = GetLeap(SolarYear); var d=(sm == 1)?leap + 28:SolarCal[sm]; var y = SolarYear - FIRSTYEAR; var acc = SolarDays[leap * 14 + sm] + SolarDate; var kc = acc + LunarCal[y].BaseKanChih; var Age = kc % 60; Age=(Age < 22)?22 - Age:82 - Age; Age = Age + 3; if (Age < 10) Age = Age + 60; if (acc <= LunarCal[y].BaseDays) { y--; var LunarYear = SolarYear - 1; leap = GetLeap(LunarYear); sm += 12; acc = SolarDays[leap * 14 + sm] + SolarDate; }else{ var LunarYear = SolarYear; } var l1 = LunarCal[y].BaseDays; for (i = 0; i < 13; i++) { var l2 = l1 + LunarCal[y].MonthDays[i] + 29; if (acc <= l2) break; l1 = l2; } var LunarMonth = i + 1; var LunarDate = acc - l1; var im = LunarCal[y].Intercalation; if (im != 0 && LunarMonth > im) { LunarMonth--; if (LunarMonth == im) LunarMonth = -im; } if (LunarMonth > 12) LunarMonth -= 12; return {yy:LunarYear,mm:LunarMonth,dd:LunarDate}; } /* 农历转公历 */ else { var LunarYear = parseInt(year); var LunarMonth = parseInt(month); var LunarDate = parseInt(date); var y = LunarYear - FIRSTYEAR; var im = LunarCal[y].Intercalation; var lm = LunarMonth; if (im != 0) { if (lm > im){ lm++; }else if (lm == -im){ lm = im + 1; } } lm--; var acc = 0; for (var i = 0; i < lm; i++) { acc += LunarCal[y].MonthDays[i] + 29; } acc += LunarCal[y].BaseDays + LunarDate; var leap = GetLeap(LunarYear); for (var i = 13; i >= 0; i--) { if (acc > SolarDays[leap * 14 + i]) break; } var SolarDate = acc - SolarDays[leap * 14 + i]; if (i <= 11) { var SolarYear = LunarYear; var SolarMonth = i + 1; } else { var SolarYear = LunarYear + 1; var SolarMonth = i - 11; } // return SolarYear + "-" + SolarMonth + "-" + SolarDate; return {yy:SolarYear,mm:SolarMonth,dd:SolarDate}; } } /* 闰年, 返回 0 平年, 1 闰年 */ function GetLeap(year) { if (year % 400 == 0) return 1; else if (year % 100 == 0) return 0; else if (year % 4 == 0) return 1; else return 0; } // 农历对象数据处理 function tagLunarCal(d, i, w, k, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11, m12, m13) { this.BaseDays = d; /* 1 月 1 日到正月初一的累计日 */ this.Intercalation = i; /* 闰月月份. 0==此年沒有闰月 */ this.BaseWeekday = w; /* 此年 1 月 1 日为星期减 1 */ this.BaseKanChih = k; /* 此年 1 月 1 日之干支序号减 1 */ this.MonthDays = [m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11, m12, m13]; /* 此农历年每月之大小, 0==小月(29日), 1==大月(30日) */ } // PC滑动鼠标滚轮处理 function gearMouseRolling(e){ var e=e||event; var dir=true; if(e.wheelDelta){ dir=e.wheelDelta>0?true:false; //ie和chrome }else{ dir=e.detail<0?true:false;//firefox } //dir:true向上滚动,false向下滚动 var moveDir=dir?21:-21; // 移动前 e.preventDefault(); var target = e.target; while (true) { if (!target.classList.contains("gear")) { target = target.parentElement; } else { break } } clearInterval(target["int_" + target.id]); target["old_" + target.id] = 0; target["o_t_" + target.id] = (new Date()).getTime(); var top = target.getAttribute(‘top‘); if (top) { target["o_d_" + target.id] = parseFloat(top.replace(/em/g, "")); } else { target["o_d_" + target.id] = 0; } // 移动中 target["new_" + target.id] = moveDir; target["n_t_" + target.id] = (new Date()).getTime()+360; var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / 370; target["pos_" + target.id] = target["o_d_" + target.id] + f; target.setAttribute(‘top‘, target["pos_" + target.id] + ‘em‘); // 移动后 var flag = (target["new_" + target.id] - target["old_" + target.id]) / (target["n_t_" + target.id] - target["o_t_" + target.id]); if (Math.abs(flag) <= 0.2) { target["spd_" + target.id] = (flag < 0 ? -0.08 : 0.08); } else { if (Math.abs(flag) <= 0.5) { target["spd_" + target.id] = (flag < 0 ? -0.16 : 0.16); } else { target["spd_" + target.id] = flag / 2; } } if (!target["pos_" + target.id]) { target["pos_" + target.id] = 0; } if(e.preventDefault){e.preventDefault();} rollGear(target); return false; } // PC滑动鼠标处理 function gearMouseSlide(e){ e.preventDefault(); var target = e.target; var targetPc=target; var mousedownTip=false;//鼠标滑动锁 while (true) { if (!target.classList.contains("gear")) { target = target.parentElement; } else { break } } clearInterval(target["int_" + target.id]); target["old_" + target.id] = e.screenY; target["o_t_" + target.id] = (new Date()).getTime(); var top = target.getAttribute(‘top‘); if (top) { target["o_d_" + target.id] = parseFloat(top.replace(/em/g, "")); } else { target["o_d_" + target.id] = 0; } document.onmousemove=function(e){ mousedownTip=true;//鼠标滑动锁 e = e || window.event; e.preventDefault(); var target = targetPc;//鼠标兼容处理 while (true) { if (!target.classList.contains("gear")) { target = target.parentElement; } else { break } } target["new_" + target.id] = e.screenY; target["n_t_" + target.id] = (new Date()).getTime(); var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / 370; target["pos_" + target.id] = target["o_d_" + target.id] + f; target.style["transform"] = ‘translate(0,‘ + target["pos_" + target.id] + ‘em)‘; target.style["-webkit-transform"] = ‘translate(0,‘ + target["pos_" + target.id] + ‘em)‘; target.style["-moz-transform"] = ‘translate(0,‘ + target["pos_" + target.id] + ‘em)‘; target.style["-ms-transform"] = ‘translate(0,‘ + target["pos_" + target.id] + ‘em)‘; target.style["-o-transform"] = ‘translate(0,‘ + target["pos_" + target.id] + ‘em)‘; target.setAttribute(‘top‘, target["pos_" + target.id] + ‘em‘); }; // 释放鼠标 document.onmouseup=function(e){ //阻止点击 if(!mousedownTip){ document.onmousemove=null; document.onmouseup=null; return false; } e = e || window.event; e.preventDefault(); var target = targetPc;//鼠标兼容处理 while (true) { if (!target.classList.contains("gear")) { target = target.parentElement; } else { break; } } var flag = (target["new_" + target.id] - target["old_" + target.id]) / (target["n_t_" + target.id] - target["o_t_" + target.id]); if (Math.abs(flag) <= 0.2) { target["spd_" + target.id] = (flag < 0 ? -0.08 : 0.08); } else { if (Math.abs(flag) <= 0.5) { target["spd_" + target.id] = (flag < 0 ? -0.16 : 0.16); } else { target["spd_" + target.id] = flag / 2; } } if (!target["pos_" + target.id]) { target["pos_" + target.id] = 0; } rollGear(target); document.onmousemove=null; document.onmouseup=null; } } //触摸开始 function gearTouchStart(e) { e.preventDefault(); var target = e.target; target[‘touchTip‘]=false;//滑动锁 while (true) { if (!target.classList.contains("gear")) { target = target.parentElement; } else { break } } clearInterval(target["int_" + target.id]); target["old_" + target.id] = e.targetTouches[0].screenY; target["o_t_" + target.id] = (new Date()).getTime(); var top = target.getAttribute(‘top‘); if (top) { target["o_d_" + target.id] = parseFloat(top.replace(/em/g, "")); } else { target["o_d_" + target.id] = 0; } } //手指移动 function gearTouchMove(e) { e.preventDefault(); var target = e.target; target[‘touchTip‘]=true;//滑动锁 while (true) { if (!target.classList.contains("gear")) { target = target.parentElement; } else { break } } target["new_" + target.id] = e.targetTouches[0].screenY; target["n_t_" + target.id] = (new Date()).getTime(); var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / 370; target["pos_" + target.id] = target["o_d_" + target.id] + f; target.style["transform"] = ‘translate(0,‘ + target["pos_" + target.id] + ‘em)‘; target.style["-webkit-transform"] = ‘translate(0,‘ + target["pos_" + target.id] + ‘em)‘; target.style["-moz-transform"] = ‘translate(0,‘ + target["pos_" + target.id] + ‘em)‘; target.style["-ms-transform"] = ‘translate(0,‘ + target["pos_" + target.id] + ‘em)‘; target.style["-o-transform"] = ‘translate(0,‘ + target["pos_" + target.id] + ‘em)‘; target.setAttribute(‘top‘, target["pos_" + target.id] + ‘em‘); } //离开屏幕 function gearTouchEnd(e) { e.preventDefault(); var target = e.target; if(!target[‘touchTip‘]) return false; while (true) { if (!target.classList.contains("gear")) { target = target.parentElement; } else { break; } } var flag = (target["new_" + target.id] - target["old_" + target.id]) / (target["n_t_" + target.id] - target["o_t_" + target.id]); if (Math.abs(flag) <= 0.2) { target["spd_" + target.id] = (flag < 0 ? -0.08 : 0.08); } else { if (Math.abs(flag) <= 0.5) { target["spd_" + target.id] = (flag < 0 ? -0.16 : 0.16); } else { target["spd_" + target.id] = flag / 2; } } if (!target["pos_" + target.id]) { target["pos_" + target.id] = 0; } rollGear(target); } //缓动效果 function rollGear(target) { var d = 0; var stopGear = false; var passY = _self.maxY - _self.minY + 1; clearInterval(target["int_" + target.id]); target["int_" + target.id] = setInterval(function() { var pos = target["pos_" + target.id]; var speed = target["spd_" + target.id] * Math.exp(-0.03 * d); pos += speed; if (Math.abs(speed) > 0.1) {} else { speed = 0.1; var b = Math.round(pos / 2) * 2; if (Math.abs(pos - b) < 0.02) { stopGear = true; } else { if (pos > b) { pos -= speed } else { pos += speed } } } if (pos > 8) { pos = 8; stopGear = true; } switch (target.getAttribute(‘data-datetype‘)) { case "date_yy": var minTop = 8 - (passY - 1) * 2; if (pos < minTop) { pos = minTop; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 8) / 2; setGear(target, gearVal); clearInterval(target["int_" + target.id]); } break; case "date_mm": var date_yy = _self.gearDate.querySelector(".date_yy"); //得到年份的值 var yyVal = parseInt(date_yy.getAttribute("val")); // 判断否有闰月 var rmNum=LunarCal[yyVal].Intercalation?LunarCal[yyVal].Intercalation:0; if(rmNum && _self.type){ var maxM = 12; }else{ var maxM = 11; } var minM = 0; //当年份到达最大值 if (yyVal == passY - 1) { if(_self.type){ maxM = _self.maxM - 2; }else{ maxM = _self.maxM - 1; } // maxM = _self.maxM - 1; } //当年份到达最小值 if (yyVal == 0) { if(_self.type){ minM = _self.minM - 1; }else{ minM = _self.minM; } // minM = _self.minM - 1; } var minTop = 8 - (maxM - minM) * 2; if (pos < minTop) { pos = minTop; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 8) / 2 + minM; setGear(target, gearVal); clearInterval(target["int_" + target.id]); } break; case "date_dd": var date_yy = _self.gearDate.querySelector(".date_yy"); var date_mm = _self.gearDate.querySelector(".date_mm"); //得到年份的值 var yyVal = parseInt(date_yy.getAttribute("val")); //得到月份的值 var mmVal = parseInt(date_mm.getAttribute("val")); //返回月份的天数 var maxMonthDays = calcDays(yyVal, mmVal); var maxD = maxMonthDays - 1; var minD = 0; //当年份月份到达最大值 if (yyVal == passY - 1 && 11 == mmVal + 1) { if(_self.type){ maxD = _self.maxD - 7; }else{ maxD = _self.maxD - 2; } // maxD = _self.maxD - 1; } //当年、月到达最小值 if (yyVal == 0 && 2 == mmVal + 1) { if(_self.type){ minD = _self.minD -1; }else{ minD = _self.minD + 6; } // minD = _self.minD - 1; } var minTop = 8 - (maxD - minD) * 2; if (pos < minTop) { pos = minTop; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 8) / 2 + minD; setGear(target, gearVal); clearInterval(target["int_" + target.id]); } break; default: } target["pos_" + target.id] = pos; target.style["transform"] = ‘translate(0,‘ + pos + ‘em)‘; target.style["-webkit-transform"] = ‘translate(0,‘ + pos + ‘em)‘; target.style["-moz-transform"] = ‘translate(0,‘ + pos + ‘em)‘; target.style["-ms-transform"] = ‘translate(0,‘ + pos + ‘em)‘; target.style["-o-transform"] = ‘translate(0,‘ + pos + ‘em)‘; target.setAttribute(‘top‘, pos + ‘em‘); d++; }, 6); } //控制插件滚动后停留的值 function setGear(target, val) { val = Math.round(val); target.setAttribute("val", val); setDateGearTooth(); } //取消 function closeMobileCalendar(e) { e.preventDefault(); if (!window.CustomEvent) { var evt = new CustomEvent(‘input‘); _self.trigger.dispatchEvent(evt); } document.body.removeChild(_self.gearDate); } //日期确认 function finishMobileDate(e) { var d=getCalendarDate(); _self.trigger.setAttribute(‘data-date‘,d.yy+ "-" + d.mm + "-" +d.dd); var inputId=_self.trigger.getAttribute(‘data-input-id‘); if(inputId) document.getElementById(inputId).value=d.yy+ "-" + d.mm + "-" +d.dd; if(_self.type){ var mmChina=d._mm<0?getChinese(‘rm‘,-d._mm):getChinese(‘mm‘,d._mm); _self.trigger.value = "农历:"+d._yy+ "年" +mmChina+‘‘+getChinese(‘dd‘,d._dd);; }else{ _self.trigger.value = "公历:"+d.yy+ "-" + d.mm + "-" +d.dd; } closeMobileCalendar(e); } //设置顶部日期+返回对象 _yy 农历年 yy公历年 function getCalendarDate(){ var passY = _self.maxY - _self.minY + 1; var val_yy = parseInt(Math.round(_self.gearDate.querySelector(".date_yy").getAttribute("val"))); var date_yy=val_yy % passY + _self.minY; var date_mm = parseInt(Math.round(_self.gearDate.querySelector(".date_mm").getAttribute("val"))) + 1; var date_dd = parseInt(Math.round(_self.gearDate.querySelector(".date_dd").getAttribute("val"))) + 1; // 判断否有闰月 var rmNum=LunarCal[val_yy].Intercalation?LunarCal[val_yy].Intercalation:0; if(_self.type && rmNum){ if(rmNum==(date_mm-1)){ date_mm=-(date_mm-1); }else if(rmNum<(date_mm-1)){ date_mm=date_mm-1; }else{ date_mm=date_mm; } } var objDate=calendarConvert(_self.type,date_yy,date_mm,date_dd); var info=_self.gearDate.querySelector(".lcalendar_info"); if(_self.type){ _self.trigger.setAttribute("data-type", 1); var mmChina=date_mm<0?getChinese(‘rm‘,-date_mm):getChinese(‘mm‘,date_mm); info.innerHTML=‘农历:‘+date_yy+‘年‘+mmChina+‘‘+getChinese(‘dd‘,date_dd); return { yy:objDate.yy, mm:objDate.mm, dd:objDate.dd, _yy:date_yy, _mm:date_mm, _dd:date_dd } }else{ _self.trigger.setAttribute("data-type", 0); info.innerHTML=‘公历:‘+date_yy+‘年‘+date_mm+‘月‘+date_dd+‘日‘; return { _yy:objDate.yy, _mm:objDate.mm, _dd:objDate.dd, yy:date_yy, mm:date_mm, dd:date_dd } } } _self.trigger.addEventListener(‘click‘, { "date": popupDate }[type],false); } } return MobileCalendar; })()
效果图如图所示:
时间: 2024-11-05 11:26:41