自己动手丰衣足食之移动端日期选择插件（强烈推荐）
2024-05-14 16:32:24
移动端的日期选择插件相比PC端比较少，主要原因是不同手机浏览器的效果不一样，mobiscroll 太臃肿了，而且不是免费的，一个字：丑
在此向大家分享一款手机端的日期选择插件https://github.com/xfhxbb/lCalendar，特此向这位雷锋敬意，另一个是移动端 城市 选择插件http://blog.csdn.net/libin_1/article/details/50689075
或者看看http://blog.csdn.net/libin_1/article/details/50400941
QQ 浏览器：
原版的效果 下载地址http://download.csdn.net/detail/cometwo/9436022
不过有时候需要时分秒，特此在原基础上小小改动一下，下载地址http://download.csdn.net/detail/cometwo/9437826
小米note 自带浏览器测试
源码：
<!Doctype html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><meta http-equiv="refresh" content="100"><title>lCalendar纯原生js日期时间选择</title><script src="js/lCalendar.js"></script><link rel="stylesheet" href="css/lCalendar.css"><style type="text/css">* {margin: 0;padding: 0;-webkit-appearance: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-touch-callout: none;box-sizing: border-box;}html,body {margin: 0 auto;width: 100%;min-height: 100%;overflow-x: hidden;-webkit-user-select: none;}body {font-family: Helvetica Neue, Helvetica, Arial, sans-serif;-webkit-text-size-adjust: 100%;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}h1 {background-color: #19b5ee;color: #fff;font-size: 25px;text-align: center;padding: 10px;}input {width: 90%;height: 40px;font-size: 18px;border: 1px solid #19b5ee;border-radius: 5px;margin: 20px 5% 0 5%;padding: 5px;}</style></head><body><h1>lCalendar纯原生js日期时间选择</h1><div><input id="demo1" type="text" readonly="" name="input_date" placeholder="日期选择特效" data-lcalendar="2011-01-1,2019-12-31" /></div><div><input id="demo2" type="text" readonly="" name="input_date" placeholder="日期和时间选择特效" data-lcalendar="2010-01-11,2019-12-31" /></div><div><input id="demo3" type="text" readonly="" name="input_date" placeholder="时间选择特效" /></div><br /><h1>原生时间对象</h1><div><input type="date" name="input_date" placeholder="时间选择特效" /><input type="datetime" name="input_date" placeholder="时间选择特效" /><input type="datetime-local" name="input_date" placeholder="时间选择特效" /></div><script>var calendar = new lCalendar();calendar.init({'trigger': '#demo1','type': 'date'});var calendardatetime = new lCalendar();calendardatetime.init({'trigger': '#demo2','type': 'datetime'});var calendartime = new lCalendar();calendartime.init({'trigger': '#demo3','type': 'time'});</script></body></html>CSS文件：
.gearDate,
.gearDatetime,
.gearTime {font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 10px;background-color: rgba(0, 0, 0, 0.2);display: block;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9900;overflow: hidden;-webkit-animation-fill-mode: both;animation-fill-mode: both
}.date_ctrl {vertical-align: middle;background-color: white;color: #363837;margin: 0;height: auto;width: 100%;position: absolute;left: 0;bottom: 0;z-index: 9901;overflow: hidden;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)
}.slideInUp {animation: slideInUp .3s ease-in;-webkit-animation: slideInUp .3s ease-in
}@-webkit-keyframes slideInUp {from {-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0)}to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)}
}.date_roll,
.datetime_roll,
.time_roll {display: -webkit-box;width: 100%;height: auto;overflow: hidden;font-weight: bold;background-color: transparent;-webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#debb47), to(rgba(36, 142, 36, 0)));-webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0))
}.date_roll>div,
.datetime_roll>div,
.time_roll>div {font-size: 2.3em;height: 6em;float: left;background-color: transparent;position: relative;overflow: hidden;-webkit-box-flex: 4
}.date_roll_mask {-webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(#debb47), to(rgba(36, 142, 36, 0)));-webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0));padding: 0 0 3em 0
}.date_roll>div:nth-child(2) {-webkit-box-flex: 2
}.date_roll>div:nth-child(1),
.datetime_roll>div:nth-child(1) {-webkit-box-flex: 4
}.datetime_roll>div:first-child {-webkit-box-flex: 6
}.datetime_roll>div:last-child {-webkit-box-flex: 6
}.date_grid {position: relative;top: 2em;width: 100%;height: 2em;margin: 0;box-sizing: border-box;z-index: 0;border-top: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6
}.date_grid>div {color: #000;position: absolute;right: 0;top: 0;font-size: .8em;line-height: 2.5em
}.date_roll>div:nth-child(3) .date_grid>div {left: 42%
}.datetime_roll>div .date_grid>div {right: 0
}.datetime_roll>div:first-child .date_grid>div {left: auto;right: 0%
}.datetime_roll>div:last-child .date_grid>div {left: 50%
}.time_roll>div:nth-child(1) .date_grid>div {right: 0.5em;/*border: 1px solid red;*/
}
.time_roll>div .date_grid{/*border: 1px solid black;*/
}
.time_roll>div .date_grid>div {right:1em;/*border: 1px solid blue;*/
}.date_btn {color: #000;font-size: 1.6em;line-height: 1em;text-align: center;padding: .8em 1em;cursor: pointer
}.date_btn_box {display: -webkit-box;-webkit-box-pack: justify;-webkit-box-align: stretch
}.gear {float: left;position: absolute;z-index: 9902;width: 5.5em;margin-top: -6em
}.date_roll>div .gear {width: 100%
}.date_roll>div:nth-child(1) .gear {text-indent: 20%
}.date_roll>div:nth-child(2) .gear {text-indent: -20%
}.date_roll>div:nth-child(3) .gear {text-indent: -55%
}.datetime_roll>div .gear {width: 100%;text-indent: -25%
}.datetime_roll>div:first-child .gear {text-indent: -10%
}.datetime_roll>div:last-child .gear {text-indent: -50%
}.time_roll>div .gear {width: 100%;/*text-indent: -70%;*/text-align: center;
}.time_roll>div:nth-child(1) .gear {width: 100%;text-indent: 10%
}.tooth {height: 2em;line-height: 2em;text-align: center
}lCalendar.js 修改后的文件
/** lCalendar日期控件* * 作者：黄磊* * 邮箱：xfhxbb@yeah.net* * Copyright 2016* * 创建于：2016-01-08*/
window.lCalendar = (function() {var MobileCalendar = function() {this.gearDate;this.minY = 1900;this.minM = 1,this.minD = 1,this.maxY = 2099,this.maxM = 12,this.maxD = 31}MobileCalendar.prototype = {init: function(params) {this.type = params.type;this.trigger = document.querySelector(params.trigger);if (this.trigger.getAttribute("data-lcalendar") != null) {var arr = this.trigger.getAttribute("data-lcalendar").split(',');var minArr = arr[0].split('-');this.minY = ~~minArr[0];this.minM = ~~minArr[1];this.minD = ~~minArr[2];var maxArr = arr[1].split('-');this.maxY = ~~maxArr[0];this.maxM = ~~maxArr[1];this.maxD = ~~maxArr[2];}this.bindEvent(this.type);},bindEvent: function(type) {var _self = this;//呼出日期插件function popupDate(e) {_self.gearDate = document.createElement("div");_self.gearDate.className = "gearDate";_self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' +'<div class="date_btn_box">' +'<div class="date_btn lcalendar_cancel">取消</div>' +'<div class="date_btn lcalendar_finish">确定</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>' +'<div>' +'<div class="gear date_mm" data-datetype="date_mm"></div>' +'<div class="date_grid">' +'<div>月</div>' +'</div>' +'</div>' +'<div>' +'<div class="gear date_dd" data-datetype="date_dd"></div>' +'<div class="date_grid">' +'<div>日</div>' +'</div>' +'</div>' +'</div>' +'</div>' +'</div>';document.body.appendChild(_self.gearDate);dateCtrlInit();var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel");lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar);var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish");lcalendar_finish.addEventListener('touchstart', finishMobileDate);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('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);}//初始化年月日插件默认值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.value)) {rs = _self.trigger.value.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);setDateGearTooth();}//呼出日期+时间插件function popupDateTime(e) {_self.gearDate = document.createElement("div");_self.gearDate.className = "gearDatetime";_self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' +'<div class="date_btn_box">' +'<div class="date_btn lcalendar_cancel">取消</div>' +'<div class="date_btn lcalendar_finish">确定</div>' +'</div>' +'<div class="date_roll_mask">' +'<div class="datetime_roll">' +'<div>' +'<div class="gear date_yy" data-datetype="date_yy"></div>' +'<div class="date_grid">' +'<div>年</div>' +'</div>' +'</div>' +'<div>' +'<div class="gear date_mm" data-datetype="date_mm"></div>' +'<div class="date_grid">' +'<div>月</div>' +'</div>' +'</div>' +'<div>' +'<div class="gear date_dd" data-datetype="date_dd"></div>' +'<div class="date_grid">' +'<div>日</div>' +'</div>' +'</div>' +'<div>' +'<div class="gear time_hh" data-datetype="time_hh"></div>' +'<div class="date_grid">' +'<div>时</div>' +'</div>' +'</div>' +'<div>' +'<div class="gear time_mm" data-datetype="time_mm"></div>' +'<div class="date_grid">' +'<div>分</div>' +'</div>' +'</div>' +'</div>' + //date_roll'</div>' + //date_roll_mask'</div>';document.body.appendChild(_self.gearDate);dateTimeCtrlInit();var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel");lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar);var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish");lcalendar_finish.addEventListener('touchstart', finishMobileDateTime);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 time_hh = _self.gearDate.querySelector(".time_hh");var time_mm = _self.gearDate.querySelector(".time_mm");date_yy.addEventListener('touchstart', gearTouchStart);date_mm.addEventListener('touchstart', gearTouchStart);date_dd.addEventListener('touchstart', gearTouchStart);time_hh.addEventListener('touchstart', gearTouchStart);time_mm.addEventListener('touchstart', gearTouchStart);date_yy.addEventListener('touchmove', gearTouchMove);date_mm.addEventListener('touchmove', gearTouchMove);date_dd.addEventListener('touchmove', gearTouchMove);time_hh.addEventListener('touchmove', gearTouchMove);time_mm.addEventListener('touchmove', gearTouchMove);date_yy.addEventListener('touchend', gearTouchEnd);date_mm.addEventListener('touchend', gearTouchEnd);date_dd.addEventListener('touchend', gearTouchEnd);time_hh.addEventListener('touchend', gearTouchEnd);time_mm.addEventListener('touchend', gearTouchEnd);}//初始化年月日时分插件默认值function dateTimeCtrlInit() {var date = new Date();var dateArr = {yy: date.getYear(),mm: date.getMonth(),dd: date.getDate() - 1,hh: date.getHours(),mi: date.getMinutes()};if (/^\d{4}-\d{1,2}-\d{1,2}\s\d{2}:\d{2}$/.test(_self.trigger.value)) {rs = _self.trigger.value.match(/(^|-|\s|:)\d{1,4}/g);dateArr.yy = rs[0] - _self.minY;dateArr.mm = rs[1].replace(/-/g, "") - 1;dateArr.dd = rs[2].replace(/-/g, "") - 1;dateArr.hh = parseInt(rs[3].replace(/\s0?/g, ""));dateArr.mi = parseInt(rs[4].replace(/:0?/g, ""));} 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);setDateGearTooth();_self.gearDate.querySelector(".time_hh").setAttribute("val", dateArr.hh);_self.gearDate.querySelector(".time_mm").setAttribute("val", dateArr.mi);setTimeGearTooth();}//呼出时间插件function popupTime(e) {_self.gearDate = document.createElement("div");_self.gearDate.className = "gearDate";_self.gearDate.innerHTML = '<div class="date_ctrl slideInUp">' +'<div class="date_btn_box">' +'<div class="date_btn lcalendar_cancel">取消</div>' +'<div class="date_btn lcalendar_finish">确定</div>' +'</div>' +'<div class="date_roll_mask">' +'<div class="time_roll">' +'<div>' +'<div class="gear time_hh" data-datetype="time_hh"></div>' +'<div class="date_grid">' +'<div>时</div>' +'</div>' +'</div>' +'<div>' +'<div class="gear time_mm" data-datetype="time_mm"></div>' +'<div class="date_grid">' +'<div>分</div>' +'</div>' +'</div>' +'<div>' +'<div class="gear time_ss" data-datetype="time_ss"></div>' +'<div class="date_grid">' +'<div>秒</div>' +'</div>' +'</div>' +'</div>' +'</div>' +'</div>';document.body.appendChild(_self.gearDate);timeCtrlInit();var lcalendar_cancel = _self.gearDate.querySelector(".lcalendar_cancel");lcalendar_cancel.addEventListener('touchstart', closeMobileCalendar);var lcalendar_finish = _self.gearDate.querySelector(".lcalendar_finish");lcalendar_finish.addEventListener('touchstart', finishMobileTime);var time_hh = _self.gearDate.querySelector(".time_hh");var time_mm = _self.gearDate.querySelector(".time_mm");var time_ss = _self.gearDate.querySelector(".time_ss");time_hh.addEventListener('touchstart', gearTouchStart);time_mm.addEventListener('touchstart', gearTouchStart);time_ss.addEventListener('touchstart', gearTouchStart);time_hh.addEventListener('touchmove', gearTouchMove);time_mm.addEventListener('touchmove', gearTouchMove);time_ss.addEventListener('touchmove', gearTouchMove);time_hh.addEventListener('touchend', gearTouchEnd);time_mm.addEventListener('touchend', gearTouchEnd);time_ss.addEventListener('touchend', gearTouchEnd);}//初始化时分插件默认值function timeCtrlInit() {var d = new Date();var e = {hh: d.getHours(),mm: d.getMinutes(),ss: d.getSeconds()};if (/^\d{2}:\d{2}:\d{2}$/.test(_self.trigger.value)) {rs = _self.trigger.value.match(/(^|:)\d{2}/g);e.hh = parseInt(rs[0].replace(/^0?/g, ""));e.mm = parseInt(rs[1].replace(/:0?/g, ""));e.ss = parseInt(rs[2].replace(/:0?/g, ""));}//alert(e.ss); 测试用_self.gearDate.querySelector(".time_hh").setAttribute("val", e.hh);_self.gearDate.querySelector(".time_mm").setAttribute("val", e.mm);_self.gearDate.querySelector(".time_ss").setAttribute("val", e.ss);setTimeGearTooth();}//重置日期节点个数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["-webkit-transform"] = 'translate3d(0,' + top + 'em,0)';date_yy.setAttribute('top', top + 'em');yyVal = Math.abs(top - 8) / 2;date_yy.setAttribute("val", yyVal);} else {date_yy.style["-webkit-transform"] = 'translate3d(0,' + (8 - yyVal * 2) + 'em,0)';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 maxM = 11;var minM = 0;//当年份到达最大值if (yyVal == passY - 1) {maxM = _self.maxM - 1;}//当年份到达最小值if (yyVal == 0) {minM = _self.minM - 1;}//p 当前节点前后需要展示的节点个数for (var p = 0; p < maxM - minM + 1; p++) {itemStr += "<div class='tooth'>" + (minM + p + 1) + "</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["-webkit-transform"] = 'translate3d(0,' + (8 - (mmVal - minM) * 2) + 'em,0)';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);//p 当前节点前后需要展示的节点个数var maxD = maxMonthDays - 1;var minD = 0;//当年份月份到达最大值if (yyVal == passY - 1 && _self.maxM == mmVal + 1) {maxD = _self.maxD - 1;}//当年、月到达最小值if (yyVal == 0 && _self.minM == mmVal + 1) {minD = _self.minD - 1;}for (var p = 0; p < maxD - minD + 1; p++) {itemStr += "<div class='tooth'>" + (minD + p + 1) + "</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["-webkit-transform"] = 'translate3d(0,' + (8 - (ddVal - minD) * 2) + 'em,0)';date_dd.setAttribute('top', 8 - (ddVal - minD) * 2 + 'em');} else {return;}}//重置时间节点个数function setTimeGearTooth() {var time_hh = _self.gearDate.querySelector(".time_hh");if (time_hh && time_hh.getAttribute("val")) {var i = "";var hhVal = parseInt(time_hh.getAttribute("val"));for (var g = 0; g <= 23; g++) {i += "<div class='tooth'>" + g + "</div>";}time_hh.innerHTML = i;time_hh.style["-webkit-transform"] = 'translate3d(0,' + (8 - hhVal * 2) + 'em,0)';time_hh.setAttribute('top', 8 - hhVal * 2 + 'em');} else {return}var time_mm = _self.gearDate.querySelector(".time_mm");if (time_mm && time_mm.getAttribute("val")) {var i = "";var mmVal = parseInt(time_mm.getAttribute("val"));for (var g = 0; g <= 59; g++) {i += "<div class='tooth'>" + g + "</div>";}time_mm.innerHTML = i;time_mm.style["-webkit-transform"] = 'translate3d(0,' + (8 - mmVal * 2) + 'em,0)';time_mm.setAttribute('top', 8 - mmVal * 2 + 'em');} else {return}var time_ss = _self.gearDate.querySelector(".time_ss");if (time_ss && time_ss.getAttribute("val")) {var i = "";var mmVal = parseInt(time_ss.getAttribute("val"));for (var g = 0; g <= 59; g++) {i += "<div class='tooth'>" + g + "</div>";}time_ss.innerHTML = i;time_ss.style["-webkit-transform"] = 'translate3d(0,' + (8 - mmVal * 2) + 'em,0)';time_ss.setAttribute('top', 8 - mmVal * 2 + 'em');} else {return}}//求月份最大天数function calcDays(year, month) {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;}}}//触摸开始function gearTouchStart(e) {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] = 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;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 / target.clientHeight;var f = (target["new_" + target.id] - target["old_" + target.id]) * 18 / 370;target["pos_" + target.id] = target["o_d_" + target.id] + f;target.style["-webkit-transform"] = 'translate3d(0,' + target["pos_" + target.id] + 'em,0)';target.setAttribute('top', target["pos_" + target.id] + 'em');}//离开屏幕function gearTouchEnd(e) {e.preventDefault();var target = e.target;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.dataset.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 maxM = 11;var minM = 0;//当年份到达最大值if (yyVal == passY - 1) {maxM = _self.maxM - 1;}//当年份到达最小值if (yyVal == 0) {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 && _self.maxM == mmVal + 1) {maxD = _self.maxD - 1;}//当年、月到达最小值if (yyVal == 0 && _self.minM == mmVal + 1) {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;case "time_hh":if (pos < -38) {pos = -38;stopGear = true;}if (stopGear) {var gearVal = Math.abs(pos - 8) / 2;setGear(target, gearVal);clearInterval(target["int_" + target.id]);}break;case "time_mm":if (pos < -110) {pos = -110;stopGear = true;}if (stopGear) {var gearVal = Math.abs(pos - 8) / 2;setGear(target, gearVal);clearInterval(target["int_" + target.id]);}break;case "time_ss":if (pos < -110) {pos = -110;stopGear = true;}if (stopGear) {var gearVal = Math.abs(pos - 8) / 2;setGear(target, gearVal);clearInterval(target["int_" + target.id]);}break;default:}target["pos_" + target.id] = pos;target.style["-webkit-transform"] = 'translate3d(0,' + pos + 'em,0)';target.setAttribute('top', pos + 'em');d++;}, 30);}//控制插件滚动后停留的值function setGear(target, val) {val = Math.round(val);target.setAttribute("val", val);if (/date/.test(target.dataset.datetype)) {setDateGearTooth();} else {setTimeGearTooth();}}//取消function closeMobileCalendar(e) {e.preventDefault();var evt = new CustomEvent('input');_self.trigger.dispatchEvent(evt);document.body.removeChild(_self.gearDate);}//日期确认function finishMobileDate(e) {var passY = _self.maxY - _self.minY + 1;var date_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;date_mm = date_mm > 9 ? date_mm : '0' + date_mm;var date_dd = parseInt(Math.round(_self.gearDate.querySelector(".date_dd").getAttribute("val"))) + 1;date_dd = date_dd > 9 ? date_dd : '0' + date_dd;_self.trigger.value = (date_yy % passY + _self.minY) + "-" + date_mm + "-" + date_dd;closeMobileCalendar(e);}//日期时间确认function finishMobileDateTime(e) {var passY = _self.maxY - _self.minY + 1;var date_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;date_mm = date_mm > 9 ? date_mm : '0' + date_mm;var date_dd = parseInt(Math.round(_self.gearDate.querySelector(".date_dd").getAttribute("val"))) + 1;date_dd = date_dd > 9 ? date_dd : '0' + date_dd;var time_hh = parseInt(Math.round(_self.gearDate.querySelector(".time_hh").getAttribute("val")));time_hh = time_hh > 9 ? time_hh : '0' + time_hh;var time_mm = parseInt(Math.round(_self.gearDate.querySelector(".time_mm").getAttribute("val")));time_mm = time_mm > 9 ? time_mm : '0' + time_mm;_self.trigger.value = (date_yy % passY + _self.minY) + "-" + date_mm + "-" + date_dd + " " + (time_hh.length < 2 ? "0" : "") + time_hh + (time_mm.length < 2 ? ":0" : ":") + time_mm;closeMobileCalendar(e);}//时间确认function finishMobileTime(e) {var time_hh = parseInt(Math.round(_self.gearDate.querySelector(".time_hh").getAttribute("val")));time_hh = time_hh > 9 ? time_hh : '0' + time_hh;var time_mm = parseInt(Math.round(_self.gearDate.querySelector(".time_mm").getAttribute("val")));time_mm = time_mm > 9 ? time_mm : '0' + time_mm;var time_ss = parseInt(Math.round(_self.gearDate.querySelector(".time_ss").getAttribute("val")));time_ss = time_ss > 9 ? time_ss : '0' + time_ss;_self.trigger.value = (time_hh.length < 2 ? "0" : "") + time_hh + (time_mm.length < 2 ? ":0" : ":") + time_mm+ (time_ss.length < 2 ? ":0" : ":") + time_ss;closeMobileCalendar(e);}_self.trigger.addEventListener('click', {"date": popupDate,"datetime": popupDateTime,"time": popupTime}[type]);}}return MobileCalendar;
})()自己动手丰衣足食之移动端日期选择插件（强烈推荐）相关推荐
- 移动端日期选择插件rolldate
rolldate为上一版jquery移动端时间插件的全新版本,目前保留了上一版的大部分功能,并且增加了回调函数,以及主题风格选取,最重要的是解决了上一版本的遗留问题,依赖jquery.滑动不够流畅.参 ...
- 每日分享，三款纯jquery移动端日期时间选择插件
序言:mm再也不用担心我找不到合适好看的日期选择插件了,今天分享三款纯jquery移动端日期时间选择插件,赶紧点赞收藏转发吧. 一.jQuery移动端触屏滑动时间日期选择插件 简介:jQuery移动端 ...
- php日期选择插件,优雅的日期选择插件daterangepicker
插件描述:jQuery bootstrap日期选择插件daterangepicker,多种时间类型选择 使用方法 第一步:引入css文件: bootstrap.min.css.font-awesome ...
- daterangepicker java_日期选择插件Date Range Picker
Date Range Picker jQuery Date Range Picker 是一个基于 jQuery 的日期选择插件,使用起来也算方便,主要提 日期范围.单个日期 (时间.周.快捷键.每周其 ...
- jquery日期选择插件
这个插件最近发现有一个小Bug,已经修改过. 又写了一个日期选择插件,大家看代码吧,不知怎么的,老是上传不了资源文件了 /* * $-color 0.1 - New Wave Javascript * ...
- 原生js实现日期选择器插件 简单风格日期选择插件
原生js实现日期选择插件 xs-DatePicker ** 效果图 ** ** 简介 通过原生HTML/CSS/JavaScript完成一个日期选择器. 代码如下: ** <!-- 时间:202 ...
- android md日期选择器,移动端日期选择
image.png 自己修改源的源码更加方便好用!粘贴即用,不明白的可以问我wx: xin32934 Mdate.js 是一款依托于iScroll.js的日期选择小型插件,可滑动选择年.月.日,只适用 ...
- layDate日期选择插件
在日常的网页开发过程中,日期组件已经成为不可或缺的组件之一.同时,随着广大杰出攻城狮的不懈努力,也出现了很多优秀的日期组件,其中我个人觉得 layDate 日期组件是一个非常不错的组件,简洁易用,样式 ...
- 自己动手写一个移动端日期选择器组件
文章目录 背景 效果演示 思路 实现 1. picker-view 实现基础交互 2. 年月日动态配置以及支持最大最小日期 3. 支持不同日期模式 背景 本文写的组件是基于 uni-app 框架下的, ...
最新文章
- Adversarial Discriminative Domain Adaption 阅读笔记
- vs2013如何选择一个solution中的project来运行
- 随机生成10元素数组并找出最大元素（Java）
- php yii 命令行,命令行模式（Command）
- 【布莱克智讯之声公众号】 精彩图文分类导航
- Maven多模块打包遇到的问题详解
- netlink 009 -- Generic Netlink初始化
- 日语中阴历月份的别称
- HTML嵌入百度地图
- linux解压rar.gz,Linux tar.gz 、zip、rar 解压 压缩命令
- 数据库系统原理与应用教程（042）—— MySQL 查询（四）：使用通配符构造查询条件
- Silicon单片机芯片解密
- 人工智能实践：Tensorflow笔记 Class 5：卷积神经网络
- 04-0002 PCA算法
- 怎样用蚯蚓钓鲤鱼的技巧介绍
- 如何用射频接收机测量噪声系数？
- GNSS数据下载网站整理，包括gamit、bernese更新文件地址[2021.08更新]
- 下一代计算：空间计算
- toshiba 共享文件夹_东芝2051C打印机怎么连接并扫描文件到电脑?
- 老公屡屡出 轨偷腥，我还要委曲求全吗？