小编给大家分享一下如何设置TP5.1+layui时间范围,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
在制作一个项目时遇到一个问题,就是开始时间和结束时间是相关联的,结束时间的选择范围是最小为开始时间,最大为开始时间90天后的时间,我这边用的是layui的插件获取的日期,里面有两个参数min和max分别可以设置日期范围;
其代码如下所示:
layui.use('laydate', function(){
var laydate = layui.laydate;
//限定可选日期
var ins22 = laydate.render({
elem: '#test-limit1'
,min: '2016-10-14'
,max: '2080-10-14'
});
});
但是怎么获取max和min的值时,我遇到了难点,后面经过反复研究Layui官方文档和反复的尝试,终于解决了这一问题,分享给大家:
a.定义变量当前时间、最小时间、最大时间
var now = new Date();
var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1);
var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);
b.根据当前选择的时间重新给max和min赋值
要获取max
和min
的值,首先要了解时间换算单位,大概思路为基本换算单位以小时为准,1小时为3600秒,因为laui中的时间戳是以毫秒为计算单位,所以需要再3600的基础上再乘以1000,一天为24小时,总共90天所以是90*24*3600*1000
.
在选择了开始时间后done: function (value, date)
中value的值为当前选择的时间,将该值转化为时间戳为:var date1 = new Date(value).getTime();
90天后的时间戳为:var date2 = date1 + 90 * 24 * 3600 * 1000;
再将获取的时间转化为年月日:
var date5 = {
'date': date3.getDate(),
'month': date3.getMonth() + 1,
'year': date3.getFullYear()
};
将获取到的值赋值给结束时间的最小值和最大值:
end.config.max = date5;
end.config.max.month = date5.month - 1;
end.config.min = date;
end.config.min.month = date.month - 1;
所以完整的代码为:
var start = laydate.render({
elem: '#bx_start',
type: 'date',
max: max,
min: min,
showBottom: false,
btns: ['clear', 'confirm'],
done: function (value, date) {
var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳
var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的时间
var date3 = new Date(date2);
var date5 = {
'date': date3.getDate(),
'month': date3.getMonth() + 1,
'year': date3.getFullYear()
};
end.config.max = date5;
end.config.max.month = date5.month - 1;
end.config.min = date;
end.config.min.month = date.month - 1;
}
});
c.将获取的min和max传给结束时间
var end = laydate.render({
elem: '#bx_end',
type: 'date',
max: max,
min: min,
showBottom: false,
done: function (value, date) {
if ($.trim(value) == '') {
var curDate = new Date();
date = {
'date': curDate.getDate(),
'month': curDate.getMonth() + 1,
'year': curDate.getFullYear()
};
}
start.config.max = date;
start.config.max.month = date.month - 1;
}
});
以下为完整代码
<script>
layui.use(['form','layedit', 'laydate','layer','element'], function() {
$ = layui.jquery;
layer = layui.layer;
var form = layui.form;
layedit = layui.layedit;
laydate = layui.laydate;
//定义变量当前时间、最小时间、最大时间
var now = new Date();
var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1);
var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);
var start = laydate.render({
elem: '#bx_start',
type: 'date',
max: max,
min: min,
showBottom: false,
btns: ['clear', 'confirm'],
done: function (value, date) {
var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳
var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的
var date3 = new Date(date2);
var date5 = {
'date': date3.getDate(),
'month': date3.getMonth() + 1,
'year': date3.getFullYear()
};
end.config.max = date5;
end.config.max.month = date5.month - 1;
end.config.min = date;
end.config.min.month = date.month - 1;
}
});
var end = laydate.render({
elem: '#bx_end',
type: 'date',
max: max,
min: min,
showBottom: false,
done: function (value, date) {
if ($.trim(value) == '') {
var curDate = new Date();
date = {
'date': curDate.getDate(),
'month': curDate.getMonth() + 1,
'year': curDate.getFullYear()
};
}
start.config.max = date;
start.config.max.month = date.month - 1;
}
});
});
</script>
以上是“如何设置TP5.1+layui时间范围”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。