解决layui时间控件清空之后无法正常使用的问题，以及时间范围的选择
共有两种解决方式：
方式一(layui 1.x)：
html代码：
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="start_time" class="layui-input" id="start_time"
placeholder="开始时间(修改时间)">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="end_time" class="layui-input" id="end_time"
placeholder="结束时间(修改时间)">
</div>
</div>
js代码：
var start = {
istime: true,
format: 'YYYY-MM-DD hh:mm:ss',
max: '2099-06-16 23:59:59',
istoday: true,
choose: function (datas) {
end.min = datas; //开始日选好后，重置结束日的最小日期
}
};
var end = {
istime: true,
format: 'YYYY-MM-DD hh:mm:ss',
max: '2099-06-16 23:59:59',
istoday: true,
choose: function (datas) {
start.max = datas; //结束日选好后，重置开始日的最大日期
}
};
document.getElementById('start_time').onclick = function () {
start.elem = this;
laydate(start);
};
document.getElementById('end_time').onclick = function () {
end.elem = this;
laydate(end);
};
方式二(layui 2.x)：
html代码
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="start_time" class="layui-input" id="start_time"
placeholder="开始时间(修改时间)">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="end_time" class="layui-input" id="end_time"
placeholder="结束时间(修改时间)">
</div>
</div>
js代码
layui.use([ 'laydate'], function(){
var $ = layui.$;
var laydate = layui.laydate;
var nowTime = new Date().valueOf();
var max = null;
var start = laydate.render({
elem: '#start_time',
type: 'datetime',
max: nowTime,
btns: ['clear', 'confirm'],
done: function(value, date){
endMax = end.config.max;
end.config.min = date;
end.config.min.month = date.month -1;
}
});
var end = laydate.render({
elem: '#end_time',
type: 'datetime',
max: nowTime,
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;
}
});
根据开始时间 动态限制结束时间 知识点
type: 'datetime', 是带时分秒的 date 是不带时分秒的
layui.use('laydate', function(){
/* lay('.layui-input').each(function(){
laydate.render({
elem: this
,trigger: 'click'
,change: function(value, date, endDate){
console.log(value); //得到日期生成的值，如：2017-08-18
console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
}
});
}); */
var $ = layui.$;
var laydate = layui.laydate;
var nowTime = new Date().valueOf();
var max = null;
var start = laydate.render({
elem: '#start_time',
type: 'datetime',
btns: ['clear', 'confirm'],
done: function(value, date){
endMax = end.config.max;
end.config.min = date;
end.config.min.month = date.month -1;
},
change: function(value, date, endDate){
var timestamp2 = Date.parse(new Date(value));
timestamp2 = timestamp2 / 1000;
end.config.min = timestamp2;
end.config.min.month = date.month -1;
}
});
var end = laydate.render({
elem: '#end_time',
type: 'date',
done: function(value, date){
console.log(" ====== "+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;
}
});
});
通过以上代码，就已经可以实现动态改变开始时间最大值与结束时间最小值的改变了。
下面来说一下容易遇到的坑：
坑一 ：laydate.render无法重复渲染，当laydate.render对应一个elem已经渲染过一次之后，我们是无法通过再次渲染来修改其中的max值与min值的。
坑二 ：startDate.config.max与endDate.config.min是一个对象，不是一个字符串，在网上看到一个人不负责任的给了这么一句话，endDate.config.min="2017-01-01"；说可以设置，我居然信了他的邪掉进坑里半天。实际这里得到的是一个对象，不同于在我们渲染时的min与max了，直接将字符串赋值必然没有效果。
坑三：dates的格式虽然与endDate.config.min格式相同但是直接让endDate.config.min=dates你会发现并不是你想要的结果，是因为虽然dates中的数据是你选择的日期，可是endDate.config.min中设置的month的值却比你输入的month的值大了一个月，因此假如你选的开始日期是11月13日，直接赋值给了endDate.config.min之后你会发现结束日期的最小日期变成了12月13日，因此我们需要将dates中的月份值减一后再赋值给endDate.config.min
以上这篇layui时间控件选择时间范围的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
layui,时间控件,时间范围
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。