<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>rui-datepicker公農歷日期選擇器</title> <style> h1,h2,h3,h4,h5,h6,body,p{margin:0;} body{background: #444;font-size: 14px/1.2;} a,body{color: #fc0;} a{text-decoration: none;} header{background: #fc0;color: #333;padding:10px;text-align: center;} header p{margin:10px 0;} header a{display: inline-block;height: 34px;padding:0 16px;line-height: 32px;background: #333;color: #fc0;border-radius: 5px;} .date_input{text-align: center;margin:16px 0 0;} .date_input p{padding:0 0 8px;font-size: 1.4em} .date_input input{width: 80%;height: 50px;font-size: 18px;border: 1px solid #444;border-radius: 5px;padding: 5px;margin:0 10%;box-sizing: border-box;} </style> <!-- <link rel="stylesheet" href="../dist/rui-datepicker.min.css"> --> <!-- <script src="../dist/rui-datepicker.min.js"></script> --> <link rel="stylesheet" href="rui_date.css"> <script src="rui_date.js?v=2019"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> </head> <body> <div class="date_input"> <p>不帶時辰</p> <input id="demo1" type="text" data-toid-date="date" name="input_date" placeholder="日期選擇不帶時辰" data-type="1" data-date="1983-6-3" /></input> <input type="hidden" id="date" name="date"> </div> <div class="date_input"> <p>帶時辰</p> <input id="demo2" type="text" data-toid-date="date1" data-toid-hour="hour1" data-toid-minute="min1" name="input_date" placeholder="日期選擇帶時辰" readonly="readonly"/> <input type="hidden" id="date1" name="date"> <input type="hidden" id="hour1" name="hour"> <input type="hidden" id="min1" name="mini"> </div> <button onclick="sub()" style="width:200px;height: 50px;background-color: aqua;margin-left: 200px;margin-top: 100px">console</button> <script> var date1 = new ruiDatepicker().init('#demo1'); var date2 = new ruiDatepicker().init('#demo2'); function sub(){ var h=$('#hour1').val(); var m=$('#min1').val(); var d=$('#date1').val(); console.log(d);console.log(h);console.log(m); } </script> </body> </html>
.gearDate {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 10px;background-color: rgba(0, 0, 0, 0.2);display: block;position: absolute;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 2018917;overflow: hidden;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-transform: translateZ(0);} .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: 0;right:0;top: 12%;z-index: 9902;overflow: hidden;margin:0 auto;-webkit-transform: translateY(0);transform: translateY(0);-ms-transform: translateY(0);-moz-transform: translateY(0);} .slideInUp {animation: slideInUp .3s ease-in;-webkit-animation: slideInUp .3s ease-in;-ms-animation: slideInUp .3s ease-in;-moz-animation: slideInUp .3s ease-in} @-webkit-keyframes slideInUp { 0% {-webkit-transform: translateY(-100%);transform: translateY(-100%);-moz-transform: translateY(-100%);-ms-transform: translateY(-100%);-o-transform: translateY(-100%)} 100% {-webkit-transform: translateY(0);transform: translateY(0);-moz-transform: translateY(0);-o-transform: translateY(0);-ms-transform: translateY(0)} } @keyframes slideInUp { 0% {-webkit-transform: translateY(-100%);transform: translateY(-100%);-moz-transform: translateY(-100%);-ms-transform: translateY(-100%);-o-transform: translateY(-100%)} 100% {-webkit-transform: translateY(0);transform: translateY(0);-moz-transform: translateY(0);-o-transform: translateY(0);-ms-transform: translateY(0)} } @-moz-keyframes slideInUp { 0% {-webkit-transform: translateY(-100%);transform: translateY(-100%);-moz-transform: translateY(-100%);-ms-transform: translateY(-100%);-o-transform: translateY(-100%)} 100% {-webkit-transform: translateY(0);transform: translateY(0);-moz-transform: translateY(0);-o-transform: translateY(0);-ms-transform: translateY(0)} } @-ms-keyframes slideInUp { 0% {-webkit-transform: translateY(-100%);transform: translateY(-100%);-moz-transform: translateY(-100%);-ms-transform: translateY(-100%);-o-transform: translateY(-100%)} 100% {-webkit-transform: translateY(0);transform: translateY(0);-moz-transform: translateY(0);-o-transform: translateY(0);-ms-transform: translateY(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: 2em;height: 6em;float: left;background-color: transparent;position: relative;overflow: hidden;width: 33.33%;} .date_roll_more>div{width: 25%;} .date_roll_minut>div{width: 20%;} .date_roll_mask {padding:0 1em;-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: #363837;font-size: 1.8em;text-align: center;padding: .6em 0;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: #c91723;border:1px solid #c91723;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: #c91723;color: #fff} .date_btn_box {overflow: hidden;position: relative;border-top:1px solid #d4d4d4;margin-top:1em;} .date_btn {color: #000;font-size: 1.6em;line-height: 1em;text-align: center;padding: .8em 1em;cursor: pointer;float: left;width: 49.9%;box-sizing: border-box;} .lcalendar_cancel{float:left !important;} .lcalendar_finish{float:right !important;} .date_btn.lcalendar_cancel{border-right:1px solid #d4d4d4;} .gear {float: left;position: absolute;z-index: 9902;width: 5.5em;margin-top: -6em;cursor: pointer;padding:2em 0;} .date_roll>div .gear {width: 100%;color:#000;} .tooth {height: 2em;line-height: 2em;text-align: center;overflow: hidden;}
/* * ruiDatePicker 農歷公歷-日歷控件 * 版本：1.0 * 作者：羯瑞 * 郵箱：410232098@qq.com * 創建於：2016-12-31 * 修改：於2018-04-10 下午 永恆的微笑修改 * 更新：增加了第三種模式：添加了分鍾選項 * 使用方法： 1、只有年月日：data-toid-date="保存年月日隱藏id" 2、年月日時data-toid-date="保存年月日隱藏id" data-toid-hour="保存小時隱藏域id" 3、年月日時分data-toid-date="保存年月日隱藏id" data-toid-hour="保存小時隱藏域id" data-toid-minute="保存分鍾隱藏域id" 返回值綁定：歷法：data-toid-calendar="歷法id" */ window.ruiDatepicker = (function () { // 兼容IE-classList處理 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 datePicker = function () { this.gearDate; this.minY = 1940; this.minM = 1, this.minD = 1, this.maxY = 2020, this.maxM = 12, this.maxD = 31, this.type = 1 //0公歷，1農歷 } datePicker.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, 1, 0, 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"; // 判斷是否啟用分鍾 if (_self.trigger.getAttribute('data-toid-minute')) { _self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' + '<div class="date_info_box lcalendar_info">' + '</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 date_roll_minut">' + '<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 class="width">' + '<div class="gear date_hh" data-datetype="date_hh"></div>' + '<div class="date_grid">' + '</div>' + '</div>' + '<div>' + '<div class="gear date_min" data-datetype="date_min"></div>' + '<div class="date_grid">' + '</div>' + '</div>' + '</div>' + '<div class="date_btn_box">' + '<div class="date_btn lcalendar_cancel">取消</div>' + '<div class="date_btn lcalendar_finish">確定</div>' + '</div>' + '</div>'; } else if (_self.trigger.getAttribute('data-toid-hour')) { // 判斷是否啟用時辰 _self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' + '<div class="date_info_box lcalendar_info">' + '</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 date_roll_more">' + '<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 class="width">' + '<div class="gear date_hh" data-datetype="date_hh"></div>' + '<div class="date_grid">' + '</div>' + '</div>' + '</div>' + '<div class="date_btn_box">' + '<div class="date_btn lcalendar_finish">確定</div>' + '<div class="date_btn lcalendar_cancel">取消</div>' + '</div>' + '</div>'; } else { _self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' + '<div class="date_info_box lcalendar_info">' + '</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); lcalendar_finish.addEventListener(hasTouch ? 'touchstart' : 'click', popupShow); //document.getElementById(_self.trigger.getAttribute('data-toid-time')).addEventListener(hasTouch ? 'touchstart' : 'click', finishMobileDate); //document.getElementById(_self.trigger.getAttribute('data-toid-hide')).addEventListener(hasTouch ? 'touchstart' : 'click', closeMobileCalendar); 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"); var date_hh = _self.gearDate.querySelector(".date_hh"); var date_min = _self.gearDate.querySelector(".date_min"); //獲取分鍾對象 date_yy.addEventListener('touchstart', gearTouchStart); date_mm.addEventListener('touchstart', gearTouchStart); date_dd.addEventListener('touchstart', gearTouchStart); date_hh ? date_hh.addEventListener('touchstart', gearTouchStart) : ''; date_min ? date_min.addEventListener('touchstart', gearTouchStart) : ''; date_yy.addEventListener('mousedown', gearMouseSlide); date_mm.addEventListener('mousedown', gearMouseSlide); date_dd.addEventListener('mousedown', gearMouseSlide); date_hh ? date_hh.addEventListener('mousedown', gearMouseSlide) : ''; date_min ? date_min.addEventListener('mousedown', gearMouseSlide) : ''; date_yy.addEventListener('touchmove', gearTouchMove); date_mm.addEventListener('touchmove', gearTouchMove); date_dd.addEventListener('touchmove', gearTouchMove); date_hh ? date_hh.addEventListener('touchmove', gearTouchMove) : ''; date_min ? date_min.addEventListener('touchmove', gearTouchMove) : ''; date_yy.addEventListener('touchend', gearTouchEnd); date_mm.addEventListener('touchend', gearTouchEnd); date_dd.addEventListener('touchend', gearTouchEnd); date_hh ? date_hh.addEventListener('touchend', gearTouchEnd) : ''; date_min ? date_min.addEventListener('touchend', gearTouchEnd) : ''; // 阻止透視滑動 _self.gearDate.addEventListener("touchmove", function (e) { e.preventDefault(); }); // 阻止鼠標滾輪事件 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); date_hh ? date_hh.addEventListener('DOMMouseScroll', gearMouseRolling, false) : ''; date_min ? date_min.addEventListener('DOMMouseScroll', gearMouseRolling, false) : ''; } else { _self.gearDate.onmousewheel = function (e) { return false }; date_yy.onmousewheel = gearMouseRolling; date_mm.onmousewheel = gearMouseRolling; date_dd.onmousewheel = gearMouseRolling; date_hh ? date_hh.onmousewheel = gearMouseRolling : ''; date_min ? date_min.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 (_self.gearDate.querySelector(".date_hh")) { var hour_val = 0; //檢查是否設置了默認小時 if (_self.trigger.getAttribute('data-hour') && _self.trigger.getAttribute('data-hour') >= 0) { hour_val = parseInt(Math.round(_self.trigger.getAttribute('data-hour')) + 1); } _self.gearDate.querySelector(".date_hh").setAttribute("val", hour_val); } // 判斷是否有分鍾 if (_self.gearDate.querySelector(".date_min")) { var minute_val = 0; //檢查是否設置了默認分鍾數 if (_self.trigger.getAttribute('data-minute') && _self.trigger.getAttribute('data-minute') >= 0) { minute_val = parseInt(Math.round(_self.trigger.getAttribute('data-minute')) + 1); } _self.gearDate.querySelector(".date_min").setAttribute("val", minute_val); } // 默認農歷或公歷 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);//返回轉換對象 var isRm = LunarCal[objDate.yy - _self.minY].Intercalation ? LunarCal[objDate.yy - _self.minY].Intercalation : 0;//判斷是不是閏年 if (objDate.mm < 0) { objDate.mm = -objDate.mm + 1;//返回的負數為 閏年 } else { //閏年月份+1重復選擇，位置才正確 if (isRm && (objDate.mm - 1) >= isRm) objDate.mm = objDate.mm + 1; } //console.log(objDate.yy - _self.minY+'_'+isRm+'_'+objDate.mm); _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 > 6 && (top = 6); var minTop = 6 - (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 - 6) / 2; date_yy.setAttribute("val", yyVal); } else { date_yy.style["transform"] = 'translate(0,' + (6 - yyVal * 2) + 'em)'; date_yy.style["-webkit-transform"] = 'translate(0,' + (6 - yyVal * 2) + 'em)'; date_yy.style["-moz-transform"] = 'translate(0,' + (6 - yyVal * 2) + 'em)'; date_yy.style["-ms-transform"] = 'translate(0,' + (6 - yyVal * 2) + 'em)'; date_yy.style["-o-transform"] = 'translate(0,' + (6 - yyVal * 2) + 'em)'; date_yy.setAttribute('top', (6 - 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); } } if (_self.type == 0) { itemStr += "<div class='tooth'>" + strVal + "月</div>"; } else { 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,' + (6 - (mmVal - minM) * 2) + 'em)'; date_mm.style["-webkit-transform"] = 'translate(0,' + (6 - (mmVal - minM) * 2) + 'em)'; date_mm.style["-moz-transform"] = 'translate(0,' + (6 - (mmVal - minM) * 2) + 'em)'; date_mm.style["-ms-transform"] = 'translate(0,' + (6 - (mmVal - minM) * 2) + 'em)'; date_mm.style["-o-transform"] = 'translate(0,' + (6 - (mmVal - minM) * 2) + 'em)'; date_mm.setAttribute('top', 6 - (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); if (_self.type == 0) { itemStr += "<div class='tooth'>" + strVal + "日</div>"; } else { 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,' + (6 - (ddVal - minD) * 2) + 'em)'; date_dd.style["-webkit-transform"] = 'translate(0,' + (6 - (ddVal - minD) * 2) + 'em)'; date_dd.style["-moz-transform"] = 'translate(0,' + (6 - (ddVal - minD) * 2) + 'em)'; date_dd.style["-ms-transform"] = 'translate(0,' + (6 - (ddVal - minD) * 2) + 'em)'; date_dd.style["-o-transform"] = 'translate(0,' + (6 - (ddVal - minD) * 2) + 'em)'; date_dd.setAttribute('top', 6 - (ddVal - minD) * 2 + 'em'); } else { return; } var date_hh = _self.gearDate.querySelector(".date_hh"); if (date_hh && date_hh.getAttribute("val")) { var hhVal = parseInt(date_hh.getAttribute("val")); itemStr = "<div class='tooth'>未知</div>";//"<div class='tooth'>未知</div>"; for (var p = 0; p < 24; p++) { var strVal = _self.type ? getChinese('hh', p) : p; itemStr += "<div class='tooth'>" + strVal + "時</div>"; } date_hh.innerHTML = itemStr; date_hh.style["transform"] = 'translate(0,' + (6 - hhVal * 2) + 'em)'; date_hh.style["-webkit-transform"] = 'translate(0,' + (6 - hhVal * 2) + 'em)'; date_hh.style["-moz-transform"] = 'translate(0,' + (6 - hhVal * 2) + 'em)'; date_hh.style["-ms-transform"] = 'translate(0,' + (6 - hhVal * 2) + 'em)'; date_hh.style["-o-transform"] = 'translate(0,' + (6 - hhVal * 2) + 'em)'; date_hh.setAttribute('top', (6 - hhVal * 2) + 'em'); //console.log("hhVal:"+hhVal); } //分鍾數初始化 var date_min = _self.gearDate.querySelector(".date_min"); if (date_min && date_min.getAttribute("val")) { var hhVal = parseInt(date_min.getAttribute("val")); itemStr = "<div class='tooth'>未知</div>"; //公歷農歷顯示一樣 for (var p = 0; p < 60; p++) { itemStr += "<div class='tooth'>" + p + "分</div>"; } date_min.innerHTML = itemStr; date_min.style["transform"] = 'translate(0,' + (6 - hhVal * 2) + 'em)'; date_min.style["-webkit-transform"] = 'translate(0,' + (6 - hhVal * 2) + 'em)'; date_min.style["-moz-transform"] = 'translate(0,' + (6 - hhVal * 2) + 'em)'; date_min.style["-ms-transform"] = 'translate(0,' + (6 - hhVal * 2) + 'em)'; date_min.style["-o-transform"] = 'translate(0,' + (6 - hhVal * 2) + 'em)'; date_min.setAttribute('top', (6 - hhVal * 2) + 'em'); } 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 = ['初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十', '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十', '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十', '三十一']; var hhArr = ['0子', '1丑', '2丑', '3寅', '4寅', '5卯', '6卯', '7辰', '8辰', '9巳', '10巳', '11午', '12午', '13未', '14未', '15申', '16申', '17酉', '18酉', '19戌', '20戌', '21亥', '22亥', '23子']; if (type == 'rm') return rmArr[num - 1]; if (type == 'mm') return mmArr[num - 1]; if (type == 'dd') return ddArr[num - 1]; if (type == 'hh') return hhArr[num]; } /** * 公歷農歷轉換 * 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 = 2020;//最大年份 //西曆年每月之日數 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 > 6) { pos = 6; stopGear = true; } switch (target.getAttribute('data-datetype')) { case "date_yy": var minTop = 6 - (passY - 1) * 2; if (pos < minTop) { pos = minTop; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 6) / 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 = 6 - (maxM - minM) * 2; if (pos < minTop) { pos = minTop; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 6) / 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 = 6 - (maxD - minD) * 2; if (pos < minTop) { pos = minTop; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 6) / 2 + minD; setGear(target, gearVal); clearInterval(target["int_" + target.id]); } break; case "date_hh": var maxHH = 25;//控制時辰滑動選擇的 var minTop = 6 - (maxHH - 1) * 2; if (pos < minTop) { pos = minTop; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 6) / 2; setGear(target, gearVal); clearInterval(target["int_" + target.id]); } break; case "date_min": var maxMinute = 61; //控制分鍾滑動選擇的 var minTop = 6 - (maxMinute - 1) * 2; if (pos < minTop) { pos = minTop; stopGear = true; } if (stopGear) { var gearVal = Math.abs(pos - 6) / 2; 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); //_self.trigger.removeAttribute('data-history'); //document.getElementById(_self.trigger.getAttribute('data-toid-show')).style['display'] = "none"; } //日期確認 function finishMobileDate(e) { var d = getCalendarDate(); _self.trigger.setAttribute('data-date', d.yy + "-" + d.mm + "-" + d.dd); _self.trigger.setAttribute('data-hour', d.hh); _self.trigger.setAttribute('data-minute', d.min); var inputId = _self.trigger.getAttribute('data-toid-date'); var hourId = _self.trigger.getAttribute('data-toid-hour'); var minuteId = _self.trigger.getAttribute('data-toid-minute'); var calendarId = _self.trigger.getAttribute('data-toid-calendar');//檢查存儲歷法是否 if (inputId) document.getElementById(inputId).value = d.yy + "-" + d.mm + "-" + d.dd; if (hourId) document.getElementById(hourId).value = d.hh < 0 ? '' : d.hh; if (minuteId) document.getElementById(minuteId).value = d.min < 0 ? '' : d.min; if (calendarId) document.getElementById(calendarId).value = d.lifa; var hourStr = '', minuteStr = ''; if (_self.type) { var mmChina = d._mm < 0 ? getChinese('rm', -d._mm) : getChinese('mm', d._mm); if (hourId) { if (d.hh < 0) { hourStr = "未知"; } else { hourStr = getChinese('hh', d.hh) + '時'; } } if (minuteId) { if (d.min < 0) { minuteStr = "未知"; } else { minuteStr = d.min + '分'; } } _self.trigger.value = "農(陰)歷:" + d._yy + "年" + mmChina + '' + getChinese('dd', d._dd) + ' ' + (hourStr == "未知" ? "" : hourStr + (minuteStr == "未知" ? "" : minuteStr)); } else { if (hourId) { if (d.hh < 0) { hourStr = "未知"; } else { hourStr = d.hh + '時'; } } if (minuteId) { if (d.min < 0) { minuteStr = "未知"; } else { minuteStr = d.min + '分'; } } _self.trigger.value = "公(陽)歷:" + d.yy + "年" + d.mm + "月" + d.dd + '日 ' + (hourStr == "未知" ? "" : hourStr + (minuteStr == "未知" ? "" : minuteStr)); } //確認時間填充文本 //document.querySelector('.timeOne').innerHTML = _self.trigger.value; // document.querySelector('.timeOne').style['display']="block"; // document.querySelector('.xiugaizz').style['display']="block"; //document.querySelector('.xiugaizz').setAttribute('data-show', '1'); 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 hour_on = _self.gearDate.querySelector(".date_hh") ? 1 : 0; if (hour_on) { var date_hh = parseInt(Math.round(_self.gearDate.querySelector(".date_hh").getAttribute("val"))) - 1; } // 判斷是否啟用分鍾 var minute_on = _self.gearDate.querySelector(".date_min") ? 1 : 0; if (minute_on) { var date_min = parseInt(Math.round(_self.gearDate.querySelector(".date_min").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); var hhStr = "", minStr = ""; if (hour_on) { if (date_hh < 0) { hhStr = "未知"; } else { hhStr = getChinese('hh', date_hh) + '時'; } } if (minute_on) { if (date_min < 0) { minStr = "未知"; } else { minStr = date_min + '分'; } } info.innerHTML = '農歷:' + date_yy + '年' + mmChina + '' + getChinese('dd', date_dd) + ' ' + hhStr + (minStr ? minStr : ""); return { yy: objDate.yy, mm: objDate.mm, dd: objDate.dd, _yy: date_yy, _mm: date_mm, _dd: date_dd, hh: date_hh, min: date_min, lifa: 1 } } else { //公歷 _self.trigger.setAttribute("data-type", 0); var hhStr = "", minStr = ""; if (hour_on) { if (date_hh < 0) { hhStr = "未知"; } else { hhStr = date_hh + '時'; } } if (minute_on) { if (date_min < 0) { minStr = "未知"; } else { minStr = date_min + '分'; } } info.innerHTML = '公歷:' + date_yy + '年' + date_mm + '月' + date_dd + '日' + ' ' + hhStr + (minStr ? minStr : ""); return { _yy: objDate.yy, _mm: objDate.mm, _dd: objDate.dd, yy: date_yy, mm: date_mm, dd: date_dd, hh: date_hh, min: date_min, lifa: 0 } } } /* * 2018-8-6新增 */ function popupShow(e) { var d = getCalendarDate(); var inputId = _self.trigger.getAttribute('data-toid-date'); var hourId = _self.trigger.getAttribute('data-toid-hour'); var minuteId = _self.trigger.getAttribute('data-toid-minute'); var calendarId = _self.trigger.getAttribute('data-toid-calendar');//檢查存儲歷法是否 if (inputId) document.getElementById(inputId).value = d.yy + "-" + d.mm + "-" + d.dd; if (hourId) document.getElementById(hourId).value = d.hh < 0 ? '' : d.hh; if (minuteId) document.getElementById(minuteId).value = d.min < 0 ? '' : d.min; if (calendarId) document.getElementById(calendarId).value = d.lifa; var hourStr = '', minuteStr = ''; if (_self.type) { var mmChina = d._mm < 0 ? getChinese('rm', -d._mm) : getChinese('mm', d._mm); if (hourId) { if (d.hh < 0) { hourStr = "未知"; } else { hourStr = getChinese('hh', d.hh) + '時'; } } if (minuteId) { if (d.min < 0) { minuteStr = "未知"; } else { minuteStr = d.min + '分'; } } _self.trigger.setAttribute('data-history', "農(陰)歷:" + d._yy + "年" + mmChina + '' + getChinese('dd', d._dd) + ' ' + (hourStr == "未知" ? "" : hourStr + (minuteStr == "未知" ? "" : minuteStr))); } else { if (hourId) { if (d.hh < 0) { hourStr = "未知"; } else { hourStr = d.hh + '時'; } } if (minuteId) { if (d.min < 0) { minuteStr = "未知"; } else { minuteStr = d.min + '分'; } } _self.trigger.setAttribute('data-history', "公(陽)歷:" + d.yy + "年" + d.mm + "月" + d.dd + '日 ' + (hourStr == "未知" ? "" : hourStr + (minuteStr == "未知" ? "" : minuteStr))); } // closeMobileCalendar(e); if (_self.trigger.getAttribute('data-toid-show')) { document.getElementById(_self.trigger.getAttribute('data-toid-show')).style['display'] = 'block'; document.querySelector('.TipsTimeTxt').innerHTML = _self.trigger.getAttribute('data-history'); } } // 判斷移動端 var isMove = false; var startTime = 0; if ('ontouchstart' in window) { // 判斷移動的點擊事件tap操作 _self.trigger.addEventListener('touchstart', function (e) { startTime = Date.now(); }); _self.trigger.addEventListener('touchmove', function (e) { isMove = true; }); _self.trigger.addEventListener('touchend', function (e) { /*判讀 是否滿足tap 的要求 一般要求tap的響應時間150*/ if (!isMove && (Date.now() - startTime) < 150) { e.preventDefault(); popupDate(); } /*重置 參數*/ isMove = false; startTime = 0; }); } else { _self.trigger.addEventListener('click', function () { popupDate(); }) } } } return datePicker; })()
第一大段代碼是demo，第二、第三段是css、js文件，你可以自行打包。代碼不做多余解釋，自己看。demo已經很明白了！如果想要修改最大顯示年，修改js中大約63行的2020即可。
* ruiDatePicker 農歷公歷-日歷控件
* 版本：1.0
* 作者：羯瑞
* 郵箱：410232098@qq.com
* 創建於：2016-12-31
* 修改：於2018-04-10 下午 永恆的微笑修改
* 更新：增加了第三種模式：添加了分鍾選項
* 使用方法：
1、只有年月日：data-toid-date="保存年月日隱藏id"
2、年月日時data-toid-date="保存年月日隱藏id" data-toid-hour="保存小時隱藏域id"
3、年月日時分data-toid-date="保存年月日隱藏id" data-toid-hour="保存小時隱藏域id" data-toid-minute="保存分鍾隱藏域id"
返回值綁定：歷法：data-toid-calendar="歷法id"