layui日期组件限定可选日期为下一天(或某天)之后
设置开始时间为某一天(例子为从“明天”开始)
layui-form表单例子
<div class="lay-main">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label"><i style="color: orange">*</i>时间:</label>
<div class="layui-input-inline" style="width:100px">
<input type="text" class="layui-input" id="time" lay-verify="required" autocomplete="off" name="time" value="${demo.time.toLocaleString()}">
</div>
<div class="layui-form-mid layui-word-aux">默认时分为00:00</div>
</div>
</div>
</form>
</div>
js方法
<script>
//使用Date prototype属性创建一个新的日期对象方法:
Date.prototype.toLocaleStringTomorrow = function() {
var dateTime=new Date();
dateTime=dateTime.setDate(dateTime.getDate()+1);
dateTime=new Date(dateTime);
var y = dateTime.getFullYear();
var m = dateTime.getMonth()+1;
m = m<10?'0'+m:m;
var d = dateTime.getDate();
d = d<10?("0"+d):d;
return y+"-"+m+"-"+d;
}
layui.use('laydate', function(){
var laydate = layui.laydate;
//限定可选日期
var tomorrowTime = (new Date()).toLocaleStringTomorrow();
var ins22 = laydate.render({
elem: '#time'
,btns: ['clear','confirm']
,format: 'yyyy-MM-dd HH:mm:ss'
,trigger: 'click'
,min: tomorrowTime
,max: '2088-11-13'
,ready: function(){
ins22.hint('日期可选值设定在 <br> '+ tomorrowTime + '到 2080-10-14');
}
});
});
</script>
某些属性解析如下
layui日历组件去除“现在”按钮
layui日历组件中laydate.render默认的属性btns: [‘clear’,‘now’,‘confirm’]分别对应“清空”,“现在”,“确认”按钮。
,btns: ['clear','confirm']
解决点击输入框时日历时间不显示或闪烁
,trigger: 'click' //自动弹出控件的事件,采用click弹出(防止闪烁),同时限定禁止手动输入。
layui设置日期显示格式
由于本例子中控件只有日期选项,不能选择时间,故设置该属性后的时分秒默认为零点即00:00:00。
,format: 'yyyy-MM-dd HH:mm:ss'
(注:这样修改而不是直接用日期时间控件的原因是便于精确显示限定日期、禁止用户随意设定时分)
若需要将layui日历组件修改为可选择日期和时间,则添加
type: ‘datetime’
属性即可
layui使用Date prototype属性将日期转字符串
如:Mon Aug 31 00:00:00 CST 2020 日期格式转yyyy-MM-dd输出(调用toLocaleString())。
toLocaleString() //例子调用的该方法是Date prototype中默认的方法
Date.prototype.toLocaleStringTomorrow() //这个是自定义方法
layui取消输入框历史记录
autocomplete="off"