简约好用的日期时间选择js插件

简约好用的日期时间选择js插件

今天找到了一个比较好用的日期时间选择js插件，安利给大家

这个插件是zepto.mtimer.js 特别好用的时间日期选择器，用来给网页增光添彩`在这里插入代码片是个不错的选择

这个控件对于特定的日期选择还是很方便的，譬如我的项目只需要选择当前时间之后的三天的时间，可以直接在js里配置可供选择的时间，比起其他一些臃肿又难看的库要好用的多，废话不多说，上用法
引入需要用到的js和css样式

<link rel="stylesheet" href="css/zepto.mtimer.css">
<script src="js/zepto.js"></script>
<script src="js/zepto.mtimer.js"></script>

在页面写一个input标签

<input type="text" id="picktime" />

初始化插件

$('#picktime').mtimer();

然后就可以直接用了！！！

这里我设置的参数是可选择当前日期之后的6天，右边的时间间隔是每十分钟
相关的配置需要在zepto.mtimer.js中调整成自己想要的

var defaults = {dateStart : new Date(),//修改可选日期dateNum : 6,//修改选择开始时间timeStart : 0,//修改选择持续时间timeNum : 24,onOk : null,onCancel : null,};

时间间隔

var timeStr = '';for(var j=0; j<option.timeNum; j++){var t = option.timeStart + j,sel = j == 0 ? 'selected' : '';//设置时间间隔timeStr += '<li class="'+sel+'" data-time="'+t+':00">'+t+':00</li><li data-time="'+t+':10">'+t+':10</li><li data-time="'+t+':20">'+t+':20</li><li data-time="'+t+':30">'+t+':30</li><li data-time="'+t+':40">'+t+':40</li><li data-time="'+t+':50">'+t+':50</li>';//设置每30分钟选一次timeStr += '<li class="'+sel+'" data-time="'+t+':00">'+t+':00</li><li data-time="'+t+':10">'+t+':10</li>';if(j==option.timeNum - 1){timeStr += '<li data-time="'+(t+1)+':00">'+(t+1)+':00</li>';}}

当然这只是选择范围时间，如果你还想精确到分的话，就可以直接在config中配置就好，它是有自带的配置参数的
配置参数：
dateStart : new Date(), //开始日期

dateNum : 10, //天数

timeStart : 9, //开始时刻

timeNum : 12, //小时数

onOk : null, //点击确定的回调函数

onCancel : null, //点击取消的回调函数

<script>
$(function(){var config = {mode : 3, //时间选择器模式：1：年月日，2：年月日时分（24小时），3：年月日时分（12小时），4：年月日时分秒。默认：1format : 2, //时间格式化方式：1：2015年06月10日 17时30分46秒，2：2015-05-10  17:30:46。默认：2years : [2017],//年份数组nowbtn : true, //是否显示现在按钮onOk : function(){//alert('OK');},  //点击确定时添加额外的执行函数 默认nullonCancel : function(){alert('A');}, //点击取消时添加额外的执行函数 默认null}$('#picktime, #picktime2').mdatetimer(config);
});</script>

效果是这样的

要注意的是，这个插件主要是针对手机端的，对于某些浏览器可能是无法调用的，可以F12进入chrome页面调成手机端进行测试

参考博客：.html 博主：吕大豹、

技术小白，有误区劳烦大佬指点
喜欢的小伙伴可以点个关注给个赞哦
也可以加入当代青年秃头探讨群一起分享交流技术~~
Q群811430241