此前公司裏移動端的項目比較多，有不少地方用到時間選擇，並且格式不一，比如有年-月-日，年-月-日 時：分，年-月-日 時：分：秒等等，發現很難找到一個符合需求的插件，於是便自己寫了個時間選擇插件(能力有限，可能目前寫得不是很好)，下面附上代碼。
效果如下：
js:
/*!
* jquery.date.js v1.3.6
* By 霧空 https://github.com/weijhfly/jqueryDatePlugin
* Time:2017/1/24
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
'use strict';
var defaults,
d = new Date(),
doc = window.document,
nowYear = d.getFullYear(),
nowMonth = d.getMonth() + 1,
domDate,
createDate,
time,
body = $('body'),
emptyStr = "<li></li>",
isTouch = "ontouchend" in doc,
tstart = isTouch ? "touchstart" : "mousedown",
tmove = isTouch ? "touchmove" : "mousemove",
tend = isTouch ? "touchend" : "mouseup",
tcancel = isTouch ? "touchcancel" : "mouseleave",
isEnglish = (navigator.language || navigator.browserLanguage).toLowerCase().indexOf('zh') == -1,
//基於40px的高度滑動,自適應就改動這或者dpr
h = 40,
dpr = $('html').attr('data-dpr') || 1,
resH = h*dpr,
//支持的時間格式展示
dateFormat = [
//年月日 時分秒
['YYYY-MM-DD hh:mm:ss','YY-MM-DD hh:mm:ss','YYYY/MM/DD hh:mm:ss','YY/MM/DD hh:mm:ss'],
//年月日 時分
['YYYY-MM-DD hh:mm','YY-MM-DD hh:mm','YYYY/MM/DD hh:mm','YY/MM/DD hh:mm'],
//年月日
['YYYY-MM-DD','YY-MM-DD','YYYY/MM/DD','YY/MM/DD'],
//年月
['YYYY-MM','YY-MM','YYYY/MM','YY/MM']
],
opts = {
beginYear: 2010,
endYear: 2088, //可不填，結束年份不會小於當前年份
type:'YYYY-MM-DD',
limitTime:false//限制選擇時間 today 今天之前的時間不可選 tomorrow 明天之前的不可選
};
//dom渲染
domDate = '<div id="date-wrapper"><h3>選擇日期</h3><div id="d-content"><div id="d-tit"><div class="t1">年</div><div class="t2">月</div><div class="t3">日</div><div class="t4">時</div><div class="t5">分</div><div class="t6">秒</div></div><div id="d-bg"><ol id="d-year"></ol><ol id="d-month"></ol><ol id="d-day"></ol><ol id="d-hours"></ol><ol id="d-minutes"></ol><ol id="d-seconds"></ol></div></div><a id="d-cancel" href="javascript:">取消</a><a id="d-confirm" href="javascript:">確定</a></div><div id="d-mask"></div>';
var css = '<style type="text/css">a{text-decoration:none;}ol,li{margin:0;padding:0}li{list-style-type:none}#date-wrapper{position:fixed;top:20%;left:50%;width:90%;margin-left:-45%;z-index:56;text-align:center;background:#fff;border-radius:3px;padding-bottom:15px;display:none}#d-mask{position:fixed;width:100%;height:100%;top:0;left:0;background:#000;filter:alpha(Opacity=50);-moz-opacity:.5;opacity:.5;z-index:55;display:none}#date-wrapper h3{line-height:50px;background:#79c12f;color:#fff;font-size:20px;margin:0;border-radius:3px 3px 0 0}#date-wrapper ol,#d-tit>div{width:16.6666666%;float:left;position:relative}#d-content{padding:10px}#d-content #d-bg{background:#f8f8f8;border:1px solid #e0e0e0;border-radius:0 0 5px 5px;height:120px;overflow:hidden;margin-bottom:10px;position:relative}#d-cancel,#d-confirm{border-radius:3px;float:left;width:40%;line-height:30px;font-size:16px;background:#dcdddd;color:#666;margin:0 5%}#d-confirm{background:#79c12f;color:#fff}#date-wrapper li{line-height:40px;height:40px;cursor:pointer;position:relative}#d-tit{background:#f8f8f8;overflow:hidden;border-radius:5px 5px 0 0;line-height:30px;border:1px solid #e0e0e0;margin-bottom:-1px}#date-wrapper ol{-webkit-overflow-scrolling:touch;position:absolute;top:0;left:0}#date-wrapper ol:nth-child(2){left:16.6666666%}#date-wrapper ol:nth-child(3){left:33.3333332%}#date-wrapper ol:nth-child(4){left:49.9999998%}#date-wrapper ol:nth-child(5){left:66.6666664%}#date-wrapper ol:nth-child(6){left:83.333333%}#d-content #d-bg:after{content:\'\';height:40px;background:#ddd;position:absolute;top:40px;left:0;width:100%;z-index:1}#date-wrapper li span{position:absolute;width:100%;z-index:99;height:100%;left:0;top:0}#date-wrapper.two ol,.two #d-tit>div{width:50%}#date-wrapper.two ol:nth-child(2){left:50%}#date-wrapper.three ol,.three #d-tit>div{width:33.333333%}#date-wrapper.three ol:nth-child(2){left:33.333333%}#date-wrapper.three ol:nth-child(3){left:66.666666%}#date-wrapper.four ol,.four #d-tit>div{width:25%}#date-wrapper.four ol:nth-child(2){left:25%}#date-wrapper.four ol:nth-child(3){left:50%}#date-wrapper.four ol:nth-child(4){left:75%}#date-wrapper.five ol,.five #d-tit>div{width:20%}#date-wrapper.five ol:nth-child(2){left:20%}#date-wrapper.five ol:nth-child(3){left:40%}#date-wrapper.five ol:nth-child(4){left:60%}#date-wrapper.five ol:nth-child(5){left:80%}</style>';
if(isEnglish){
domDate = domDate.replace('選擇日期','DatePicker').replace('取消','cancel').replace('確定','confirm');
css = css.replace('</style>','#date-wrapper #d-tit{display:none;}</style>');
}
if(h != 40){
css = css.replace('40px',h+'px');
}
if(dpr != 1){
css = css.replace(/(\d+)px/g,function(i){
return i.replace(/\D/g,'')*dpr + 'px';
});
}
body.append(css).append(domDate);
createDate = {
y:function(begin,end){
var domYear = '',
end = end <= nowYear ? (end + 10) :end;
for (var i = begin; i <= end; i++){domYear += '<li><span>' + i + '</span></li>';}
$('#d-year').html(emptyStr + domYear + emptyStr);
},
m:function(){
var domMonth = '';
for (var j = 1; j <= 12; j++) {j = j<10?'0'+j:j;domMonth += '<li><span>' + j + '</span></li>';}
$('#d-month').html(emptyStr + domMonth + emptyStr);
},
d:function(end,active){
var end = end || createDate.bissextile(nowYear,nowMonth),
domDay = '';
for (var k = 1; k <= end; k++) {
k = k<10?'0'+k:k;
if(active && active == k){
domDay += '<li class="active"><span>' + k + '</span></li>';
}else{
domDay += '<li><span>' + k + '</span></li>';
}
}
$('#d-day').html(emptyStr + domDay + emptyStr);
},
hm:function(){
var domHours = '',domMinutes = '';
for (var i = 0; i <= 23; i++) {i = i<10?'0'+i:i;domHours += '<li><span>' + i + '</span></li>';}
$('#d-hours').html(emptyStr + domHours + emptyStr);
for (var j = 0; j <= 59; j++) {j = j<10?'0'+j:j;domMinutes += '<li><span>' + j + '</span></li>';}
$('#d-minutes').html(emptyStr + domMinutes + emptyStr);
},
s:function(){
var domSeconds = '';
for (var i = 0; i <= 59; i++) {i = i<10?'0'+i:i;domSeconds += '<li><span>' + i + '</span></li>';}
$('#d-seconds').html(emptyStr + domSeconds + emptyStr);
},
bissextile:function(year,month){
var day;
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
day = 31
} else if (month == 4 || month == 6 || month == 11 || month == 9) {
day = 30
} else if (month == 2) {
if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) { //閏年
day = 29
} else {
day = 28
}
}
return day;
},
slide:function(el){
//滑動
var T,mT,isPress = false;
$(doc).on(tstart,'#date-wrapper ol', function(e){
var e = e.originalEvent;
e.stopPropagation();
e.preventDefault();
T = e.pageY || e.touches[0].pageY;
if(!isTouch){isPress = true;}
})
$(doc).on(tmove,'#date-wrapper ol', function(e){
var e = e.originalEvent,that = $(this);
e.stopPropagation();
e.preventDefault();
if(!isTouch && !isPress){return false};
mT = e.pageY || e.touches[0].pageY;
that.css('top', that.position().top + (mT - T) + 'px');
T = mT;
if (that.position().top > 0) that.css('top', '0');
if (that.position().top < -(that.height() - (3*resH))) that.css('top', '-' + (that.height() - (3*resH)) + 'px');
})
$(doc).on(tend,'#date-wrapper ol', function(e){
var e = e.originalEvent,that = $(this);
e.stopPropagation();
e.preventDefault();
isPress = false;
dragEnd(that);
})
$(doc).on(tcancel,'#date-wrapper ol', function(e){
var e = e.originalEvent,that = $(this);
e.stopPropagation();
e.preventDefault();
isPress = false;
// 解決一個pc端莫名觸發問題
if(!isTouch && + new Date() > time + 600){
dragEnd(that);
}
})
function dragEnd(that){
//滾動調整
var t = that.position().top;
that.css('top',Math.round(t/resH)*resH+'px');
//定位active
t = Math.round(Math.abs($(that).position().top));
var li = that.children('li').get(t/resH+1);
$(li).addClass('active').siblings().removeClass('active');
//修正日期
var id = that.attr('id');
if(id == 'd-month' || id == 'd-year'){
var elDay = $('#d-day');
if(elDay.length == 0){return false;}
var end = createDate.bissextile($('#d-year .active').text(),$('#d-month .active').text());
if(end != (elDay.children().length-2)){
var active = elDay.children('.active').text();
active > end && (active = end);
createDate.d(end,active);
if(Math.abs(elDay.position().top) > elDay.height()-3*resH)elDay.css('top','-'+(elDay.height()-3*resH)+'px');
}
}
}
},
show:function(isShow){
var domMain = $('#date-wrapper'),
domMask = $('#d-mask');
if (isShow) {
domMain.show();
domMask.show();
time = + new Date();
body.css('overflow','hidden');
} else {
domMain.hide();
domMask.hide();
body.css('overflow','auto');
}
},
resetActive:function(){
var d = new Date();
if(opt.limitTime == 'tomorrow'){
d.setDate(d.getDate()+1);
}
$('#date-wrapper ol').each(function() {
var e = $(this),
eId = e.attr('id');
e.children('li').each(function() {
var li = $(this),liText = Number(li.text() == ''? 'false':li.text());
if (eId == 'd-year' && liText === d.getFullYear()) {
li.addClass('active').siblings().removeClass('active');
return false;
} else if (eId == 'd-month' && liText === (d.getMonth() + 1)) {
li.addClass('active').siblings().removeClass('active');
return false;
} else if (eId == 'd-day' && liText === d.getDate()) {
li.addClass('active').siblings().removeClass('active');
return false;
} else if (eId == 'd-hours' && liText === d.getHours()) {
li.addClass('active').siblings().removeClass('active');
return false;
} else if (eId == 'd-minutes' && liText === d.getMinutes()) {
li.addClass('active').siblings().removeClass('active');
return false;
} else if (eId == 'd-seconds' && liText === d.getSeconds()) {
li.addClass('active').siblings().removeClass('active');
return false;
}
})
})
},
toNow:function(refresh){
if (!refresh) {
$('#date-wrapper ol').each(function(){
var that = $(this);
var liTop = -(that.children('.active').position().top -resH);
that.animate({
top: liTop
},
600);
})
} else {
$('#date-wrapper ol').each(function() {
$(this).animate({
top: 0
},
0);
})
}
},
clear:function(){
createDate.toNow(true);
createDate.show(false);
}
}
createDate.m();
createDate.d();
createDate.hm();
createDate.s();
createDate.slide();
var opt,
userOption,
el = $('#date-wrapper'),
elTit = $('#d-tit'),
elBg = $('#d-bg'),
prevY = '';
function DateTool(obj){
var that = $(obj);
that.bind('click',function() {
if(that.get(0).tagName == 'INPUT'){that.blur();}
userOption = that.data('options');
if(typeof(userOption) == 'string'){userOption = JSON.parse(userOption.replace(/'/g,'"'));}
if (!el.is(':visible')) {
opt = null;
opt = $.extend({},opts,userOption || {});
var y = '' + opt.beginYear + opt.endYear;
if(prevY != y){
createDate.y(opt.beginYear,opt.endYear);
prevY = y;
}
if(dateFormat[0].indexOf(opt.type) != -1){//年月日 時分秒
elTit.children().show();
elBg.children().show();
el.attr('class','');
}else if(dateFormat[1].indexOf(opt.type) != -1){//年月日 時分
elTit.children().show();
elBg.children().show();
elTit.children(':gt(4)').hide();
elBg.children(':gt(4)').hide();
el.attr('class','five');
}else if(dateFormat[2].indexOf(opt.type) != -1){//年月日
elTit.children().show();
elBg.children().show();
elTit.children(':gt(2)').hide();
elBg.children(':gt(2)').hide();
el.attr('class','three');
}else if(dateFormat[3].indexOf(opt.type) != -1){//年月
elTit.children().show();
elBg.children().show();
elTit.children(':gt(1)').hide();
elBg.children(':gt(1)').hide();
el.attr('class','two');
}
createDate.resetActive();
createDate.show(true);
createDate.toNow(false);
$('#d-confirm').attr('d-id', obj);
}
});
}
$.date = function(obj){
DateTool(obj);
}
//取消
$('#d-cancel,#d-mask').bind('click',function(){
createDate.clear();
})
//確定
$('#d-confirm').bind('click',function(){
var y = $('#d-year .active').text(),
m = $('#d-month .active').text(),
d = $('#d-day .active').text(),
h = $('#d-hours .active').text(),
min = $('#d-minutes .active').text(),
s = $('#d-seconds .active').text(),
str,
that = $($(this).attr('d-id')),
index = dateFormat[0].indexOf(opt.type),
index1 = dateFormat[1].indexOf(opt.type),
index2 = dateFormat[2].indexOf(opt.type),
index3 = dateFormat[3].indexOf(opt.type);
if( index != -1){//年月日 時分秒
switch(index){
case 0:
str = y+'-'+m+'-'+d+' '+h+':'+min+':'+s;
break;
case 1:
str = y.substring(2)+'-'+m+'-'+d+' '+h+':'+min+':'+s;
break;
case 2:
str = y+'/'+m+'/'+d+' '+h+':'+min+':'+s;
break;
case 3:
str = y.substring(2)+'/'+m+'/'+d+' '+h+':'+min+':'+s;
break;
}
}else if(index1 != -1){//年月日 時分
switch(index1){
case 0:
str = y+'-'+m+'-'+d+' '+h+':'+min;
break;
case 1:
str = y.substring(2)+'-'+m+'-'+d+' '+h+':'+min;
break;
case 2:
str = y+'/'+m+'/'+d+' '+h+':'+min;
break;
case 3:
str = y.substring(2)+'/'+m+'/'+d+' '+h+':'+min;
break;
}
}else if(index2 != -1){//年月日
switch(index2){
case 0:
str = y+'-'+m+'-'+d;
break;
case 1:
str = y.substring(2)+'-'+m+'-'+d;
break;
case 2:
str = y+'/'+m+'/'+d;
break;
case 3:
str = y.substring(2)+'/'+m+'/'+d;
break;
}
}else if(index3 != -1){//年月
switch(index3){
case 0:
str = y+'-'+m;
break;
case 1:
str = y.substring(2)+'-'+m;
break;
case 2:
str = y+'/'+m;
break;
case 3:
str = y.substring(2)+'/'+m;
break;
}
}
if(opt.limitTime == 'today'){
var d = new Date(),
error = !isEnglish ? '不能選擇過去的時間':'You can\'t choose the past time';
//當前日期
var day = String(d.getFullYear())+'-'+String(d.getMonth() + 1)+'-'+String(d.getDate());
var d1 = new Date(str.replace(/\-/g, "\/"));
var d2 = new Date(day.replace(/\-/g, "\/"));
if(d1 < d2){
alert(error);
return false;
}
}else if(opt.limitTime == 'tomorrow'){
var d = new Date(),
error = !isEnglish ? '時間最少選擇明天':'Choose tomorrow at least';
//當前日期+1
var day = String(d.getFullYear())+'-'+String(d.getMonth() + 1)+'-'+String(d.getDate()+1);
var d1 = new Date(str.replace(/\-/g, "\/"));
var d2 = new Date(day.replace(/\-/g, "\/"));
if(d1 < d2){
alert(error);
return false;
}
}
//賦值
if(that.get(0).tagName == 'INPUT'){
that.val(str);
}else{
that.text(str);
}
createDate.show(false);
createDate.toNow(true);
})
}))<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>date demo</title>
<style type="text/css">
strong{
font-size: 15px;
}
pre{
padding: 16px 0;
overflow: auto;
line-height: 1.45;
background-color: #f6f8fa;
border-radius: 3px;
}
</style>
</head>
<body>
<pre>
<strong>jquery.date.js</strong>
<b>配置：</b>
//不填則使用默認配置
data-options="{'type':'YYYY-MM-DD hh:mm:ss','beginYear':2010,'endYear':2088}"
<b>調用方式：</b>
$.date('#date');
<b>參數說明：</b>
type--支持的格式
//年月日 時分秒
['YYYY-MM-DD hh:mm:ss','YY-MM-DD hh:mm:ss','YYYY/MM/DD hh:mm:ss','YY/MM/DD hh:mm:ss']
//年月日 時分
['YYYY-MM-DD hh:mm','YY-MM-DD hh:mm','YYYY/MM/DD hh:mm','YY/MM/DD hh:mm']
//年月日
['YYYY-MM-DD','YY-MM-DD','YYYY/MM/DD','YY/MM/DD']
//年月
['YYYY-MM','YY-MM','YYYY/MM','YY/MM']
beginYear -- 開始年份
endYear -- 結束年份，可不填，默認不會小於當前
limitTime--可選 today：今天之前的日期不可選 tomorrow：明天之前的不可選
</pre>
<h3>演示</h3>
<hr>
年月
<br>
<input type="text" id="date" data-options="{'type':'YYYY-MM','beginYear':2010,'endYear':2088}" style="width:166px;height:19px;">
<hr>
年月日
<br>
<input type="text" id="date2" data-options="{'type':'YYYY-MM-DD','beginYear':2010,'endYear':2088}" style="width:166px;height:19px;">
<hr>
年月日 時分
<br>
<input type="text" id="date3" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style="width:166px;height:19px;">
<hr>
年月日 時分秒
<br>
<button type="text" id="date4" data-options="{'type':'YYYY-MM-DD hh:mm:ss','beginYear':2010,'endYear':2088}" style="width:170px;height:25px;vertical-align: middle;text-align: left;"></button>
<hr>
時間限制
<br>
<input type="text" id="date5" data-options="{'type':'YYYY-MM-DD','beginYear':2010,'endYear':2088,'limitTime':'today'}" style="width:166px;height:19px;">
<br>
<br>
<br>
<script src="https://weijhfly.github.io/js/jquery-1.11.0.min.js"></script>
<script src="jquery.date.js"></script>
<script>
$.date('#date');
$.date('#date2');
$.date('#date3');
$.date('#date4');
$.date('#date5');
</script>
</body>
</html>
支持年月，年月日，年月日時分，年月日時分秒，支持時間限制，並且支持多種格式等，歡迎關注，github地址：https://github.com/weijhfly/jqueryDatePlugin