laydate 曲线救国之结束时间不小于开始时间

在使用laydate中 ,要求结束时间不能小于开始时间,在选择器中,不能选择部分置灰。 根据layui文档无法满足此要求(laydate.render只渲染一次);
解决思路:
1.在每次选择初始时间后,进行判断;
2.删除结束时间input标签,使laydate.render能够重新渲染;

代码如下

html部分

<div class="layui-form-item">
   				<label class="layui-form-label">开始时间</label>
   				<div class="layui-input-inline">
   					<input type="text" name="prostarttime" lay-verType="tips" lay-verify="required" id="startTime" autocomplete="off" class="layui-input">
   				</div>
   				<span style="color: #ca1e22;">*</span>
   			</div>
   			<div class="layui-form-item">
   				<label class="layui-form-label">结束时间</label>
   				<div  class="layui-input-inline end-time">
   					<input type="text" name="proendtime" lay-verType="tips" lay-verify="required|endTime" id="endTime" autocomplete="off" class="layui-input">
   				</div>
   				<span style="color: #ca1e22;">*</span>
   			</div>

js部分

 layui.use(['table', 'jquery', 'form'], function() {
				var table = layui.table,
					form = layui.form,
					$ = layui.jquery,
					laydate = layui.laydate;
				
				// 出发起始时间
				$("#startTime").on("click", function() {
					laydate.render({
						elem: '#startTime',
						trigger: 'click',
						show: true,
						done: function(value) {
							let endTime = $("#endTime").val();
							if(endTime != "" && endTime >= value){
								flushEndTime(value,endTime);
							}else{
								flushEndTime(value);
							}
						}
					
					});

				});

				/*
				 *  min: 最小值
				 *  isInitValue:初始值
				 */
				function flushEndTime(min,isInitValue) {
					$(".end-time").empty() ; // 删除原有时间选择器
					let _html = '<input type="text" name="proendtime" lay-verType="tips" lay-verify="required|endTime" id="endTime" autocomplete="off" class="layui-input">';		
					$(".end-time").html(_html); // 添加新的选择器 
					// 加载
					laydate.render({
						elem: '#endTime',
						trigger: 'click',
						min: min,
						isInitValue:true,
						value: isInitValue
					});
					
				}

				$("#endTime").on("click", function() {
					if($("#startTime").val() == '') {
						layer.msg("请选择开始时间");
						return false;
					}
				});
 }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值