Layui日期 laydate一个页面有两个日期框,第一个可以显示,第二个一闪而过的原因。

  1. 今天遇到一个页面两个日期框,第一个可以正常显示,第二个失效,一闪而过。贴上代码
	<div class="layui-inline">
       <label class="layui-form-label lable-xm">要求完成时间</label>
        <div class="layui-input-inline">
            <input type="text" name="requirementtime" id="requirementtime" placeholder="年-月-日" autocomplete="off"
            class="layui-input"  readonly>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label lable-xm">天平静校负责人</label>
        <div class="layui-input-inline input-xm">
            <input type="text" name="scaleStaticInitator" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label lable-xm">实际完成时间</label>
        <div class="layui-input-inline layui-form input-xm">
            <input type="text" name="actualtime" id="actualtime" placeholder="年-月-日" autocomplete="off"
            class="layui-input" readonly>
        </div>
    </div>
  1. Js代码

一开始我没写注释掉的代码,直接用了elem,然后后面没有其它参数,页第二个日期就失效一闪而过,我把注释打开就可以正常使用了,我也没搞懂这个是为啥,后面再慢慢研究吧

 	laydate.render({
    	elem: "#requirementtime",
	    //type: 'date',
	    //btns: ['now', 'confirm'],
	    //format: 'yyyy-MM-dd',
    });

    laydate.render({
        elem: '#actualtime',
        //type: 'date',
        //btns: ['now', 'confirm'],
        //format: 'yyyy-MM-dd',
    });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个基于layui的时间框组件实现选取日期范围的功能,且结束日期不能早于开始日期的示例代码: HTML代码: ```html <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md6 layui-col-md-offset3"> <div class="layui-form-item"> <label class="layui-form-label">开始日期</label> <div class="layui-input-block"> <input type="text" class="layui-input" id="startDate" placeholder="请选择开始日期" autocomplete="off"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">结束日期</label> <div class="layui-input-block"> <input type="text" class="layui-input" id="endDate" placeholder="请选择结束日期" autocomplete="off"> </div> </div> <div class="layui-form-item"> <button class="layui-btn" id="submitBtn">提交</button> </div> </div> </div> </div> ``` CSS代码: ```css .layui-container { margin-top: 50px; } .layui-col-md6 { border: 1px solid #e6e6e6; border-radius: 5px; box-shadow: 0 0 5px #e6e6e6; padding: 20px; } .layui-form-item { margin-bottom: 20px; } ``` JavaScript代码: ```javascript layui.use(['laydate', 'form'], function(){ var laydate = layui.laydate; var form = layui.form; // 初始化时间选择器 laydate.render({ elem: '#startDate', type: 'date', done: function(value, date){ // 开始日期选择完毕后,重新渲染结束日期选择器 endDatePicker.config.min = value; endDatePicker.render(); } }); var endDatePicker = laydate.render({ elem: '#endDate', type: 'date', done: function(value, date){ // 结束日期选择完毕后,判断结束日期是否早于开始日期 var startDate = new Date($('#startDate').val()); var endDate = new Date(value); if (endDate < startDate) { layer.msg('结束日期不能早于开始日期!', {icon: 2}); $('#endDate').val(''); } } }); // 监听表单提交事件 form.on('submit', function(data){ // 获取选取的日期范围 var startDate = $('#startDate').val(); var endDate = $('#endDate').val(); console.log('开始日期:' + startDate + ',结束日期:' + endDate); return false; }); }); ``` 在 JavaScript 中,我们使用了 `layui.use` 方法加载了 `laydate` 和 `form` 模块,并在回调函数中初始化了开始日期和结束日期的时间选择器,并监听了开始日期选择完毕后的回调函数,重新渲染了结束日期选择器,并在结束日期选择完毕后的回调函数中判断了结束日期是否早于开始日期。在表单提交事件中,我们获取了选取的日期范围,并在控制台输出。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值