laydate中设置动态改变max与min值的方法

最新推荐文章于 2022-09-08 16:20:04 发布

weixin_33929309

最新推荐文章于 2022-09-08 16:20:04 发布

阅读量284

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/maplebb/2124645

本文介绍如何在laydate中动态调整日期选择范围的最大值和最小值，并分享了实现过程中遇到的问题及解决方法。

https://blog.youkuaiyun.com/z880698223/article/details/78523258

最近开发中使用到了laydate，为了实现动态设置min与max值的功能掉进了不少网上的坑，在这里给大家分享一下我的实现方法，并说明一下其中的坑，帮助大家不要再被网上其他一些人随口胡说的方法误导

我的laydate是直接下载了一个laydate.js，使用layui中laydate的原理相同

下面直接贴上代码

html：

[html] view plain copy

<div >  
    <input type="text" id="start" placeholder="开始时间 " style="text-align:center"  readonly="true" />  
    <div class="cut-line"></div>  
    <input type="text" id="end" placeholder="结束时间 " style="text-align:center"  readonly="true" />  
</div>

js：

[javascript] view plain copy

var startDate= laydate.render({//渲染开始时间选择  
            elem: '#start'//通过id绑定html中插入的start  
            , type: 'date'  
            ,max:"2099-12-31"//设置一个默认最大值      
            ,   
            done: function (value, dates) {                     
                endDate.config.min ={  
                         year:dates.year,   
                         month:dates.month-1, //关键  
                         date: dates.date,   
                         hours: 0,   
                         minutes: 0,   
                         seconds : 0  
                };      
            }  
        });  
       var endDate= laydate.render({//渲染结束时间选择  
            elem: '#end',//通过id绑定html中插入的end  
            type: 'date',   
            min:"1970-1-1",//设置min默认最小值  
            done: function (value, dates) {  
                startDate.config.max={  
                    year:dates.year,   
                        month:dates.month-1,//关键   
                        date: dates.date,   
                        hours: 0,   
                        minutes: 0,   
                        seconds : 0  
               }  
           }  
        });

通过以上代码，就已经可以实现动态改变开始时间最大值与结束时间最小值的改变了。下面来说一下容易遇到的坑：

坑一：laydate.render无法重复渲染，当laydate.render对应一个elem已经渲染过一次之后，我们是无法通过再次渲染来修改其中的max值与min值的。

坑二：startDate.config.max与endDate.config.min是一个对象，不是一个字符串，在网上看到一个人不负责任的给了这么一句话，endDate.config.min="2017-01-01"；说可以设置，我居然信了他的邪掉进坑里半天。实际这里得到的是一个对象，不同于在我们渲染时的min与max了，直接将字符串赋值必然没有效果。

坑三：dates的格式虽然与endDate.config.min格式相同但是直接让endDate.config.min=dates你会发现并不是你想要的结果，是因为虽然dates中的数据是你选择的日期，可是endDate.config.min中设置的month的值却比你输入的month的值大了一个月，因此假如你选的开始日期是11月13日，直接赋值给了endDate.config.min之后你会发现结束日期的最小日期变成了12月13日，因此我们需要将dates中的月份值减一后再赋值给endDate.config.min

以上就是我实现动态修改laydate中min与max值的方法与我在开发中遇见的坑，如有错误欢迎大家指正

转载于:https://blog.51cto.com/maplebb/2124645