layui 时间选择器 laydate 设置默认值,最大选择区间,清空默认值
layui 时间选择器 laydate 设置默认值,最大选择区间,清空默认值
·
最近项目用到layui日期时间选择器,各种探索采坑。
我们的需求是,默认值是最近七天,最多能搜索一个月的时间区间,如下图
选择时间区间超过一个月时,提示,清空输入框,如图:
开始设置默认值,但是设置默认值之后不能清空, 后查找用一下代码实现清除
done: function (data) {
this.value = data;
this.elem.val(data)
}
另外是选择时间区间超过一个月的话,弹框提示最多选择30天,但是点击确认按钮,文本框依然可以填上选择的时间区间,这个就有问题了,在done中加入判断,可能略繁琐。最终效果是,选择时间超过30天,弹出提示框,提示框消失后,点击确认按钮,清除文本框内容和时间控件选择样式
实现步骤如下:
HTML代码:
<div class="layui-input-block">
<input type="text" class="layui-input" id="uploadTime" placeholder="请选择起止日期和时间"/>
</div>
JS代码:
layui.use(['laydate', 'table'], function() {
var laydate = layui.laydate;
//日期
var start_time = getBeforeDate(-7);//7天前 getBeforeDate自定义一个获取几天前时间的方法
var end_time = getBeforeDate(0);
var ins1 = laydate.render({
elem: '#uploadTime',
type: 'datetime',
range: '至',
format: 'yyyy-MM-dd HH:mm:ss',
trigger: 'click', //呼出事件改成click
value: start_time+' 至 '+end_time,
max : Format.dateFormat(new Date(), 'YYYY-MM-DD hh:mm:ss'),
change: function(value, date, endDate){
var d = value.split('至');
var s = new Date(d[0]);
var e = new Date(d[1]);
//计算两个时间间隔天数
var d=(e-s)/(1000*60*60*24);
if(d>30){
ins1.hint('最多选择30天'); //提示弹框
}
},
done: function (data) {
if (!data) { //点清除按钮,清除文本框时间数据
this.value = data;
this.elem.val(data)
} else {
var d = data.split('至');
var s = new Date(d[0]);
var e = new Date(d[1]);
var d=(e-s)/(1000*60*60*24);
if(d>30){ //选择时间超过一个月时,清空文本框时间数据
$('.laydate-btns-clear').click()
}
}
}
});
})
Format.dateFormat这一段是网上找的
var Format ={};
Format.dateFormat = function(d,format){
var format ="";
var date = {
"M+": d.getMonth() + 1,
"D+": d.getDate(),
"h+": d.getHours(),
"m+": d.getMinutes(),
"s+": d.getSeconds()
};
if (/(Y+)/i.test(format)) {
format = format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (var k in date) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
}
}
return format;
}
更多推荐
已为社区贡献1条内容
所有评论(0)