最近项目用到layui日期时间选择器,各种探索采坑。

我们的需求是,默认值是最近七天,最多能搜索一个月的时间区间,如下图

默认选择七天

选择时间区间超过一个月时,提示,清空输入框,如图:

最多选择30天

开始设置默认值,但是设置默认值之后不能清空, 后查找用一下代码实现清除

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;
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐