layui日期组件限定可选日期为下一天(或某天)之后

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" 

效果如下

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值