EasyUI datebox datetimebox的自定义按钮按条件设置日期的不可用 js日期计算

绝地灬酷狼 2022-06-09 07:07 280阅读 0赞

### 具体开发情景 ###

![上面为datetimebox 下面为datebox][datetimebox _datebox]

1.  首先需要 选择预计发货时间 ,在选择时需要让今天之前的日期变灰无法选择
2.  在预计发货时间选择点确定时,判断是否选择了工厂和体验线路,没选择给出提示
3.  在预计发货时间选择完后,需要根据工厂和体验线路第一家体验店所在地的是否为同一个省份为依据,+3天或者+5天,然后放在首店展示时间中的datebox中

### 在开发中遇到的问题和解决办法 ###

1.  首先需要让不符合条件的让其颜色变灰,下面是具体实现办法
    
        $('#estimatedTime').datetimebox().datetimebox('calendar').calendar({
                validator: function (date) {
                    var now = new Date(new Date() - 24 * 60 * 60 * 1000);
                    return now <= date;
                }
            });
    
    estimatedTime是预计展示时间的input的id,下面是效果
    
    ![这里写图片描述][333ecd5ae7ee78d05d34685910d83f5a.png]
    
    这里只有因为是月末,效果不太明显,只有30号后可以选,下个月虽然是灰色但是是可以选的
2.  easyui的日期控件 datetimebox 在一些api中 提供的的事件只有onSelect,后来查找后又找到onChange ,然而很多判断是需要在点击确定按钮的时候来执行
    
        <script>
            var buttons = $.extend([], $.fn.datetimebox.defaults.buttons);
            // JS中array 的 splice方法 ，第一个1就是对应日历下面的按钮位置从0开始,第二个1只可选0或1,1代表你定义的替换掉原本位置的按钮,0代表是插入相应位置不替换
            buttons.splice(1, 1, {
                text: '确定',
                handler: function (target) {   //这里的参数target指的是 datetimebox 这个控件本身的引用
                    //linName,suppliersName体验线路的名和工厂名 ,判断是否有选择,若无给出提示
                    var lineName = $('#plan_lineName').val();
                    var suppliersName = $('#plan_suppliersName').val();
                    if (lineName == "" || suppliersName == "")
                    {
                        $.messager.alert("提示", "请先选择工厂和体验线路", "Info")
                        $(target).combo("hidePanel");
                        return false;
                    }
                    //获得datetimebox的内部日历
                    var Calendar = $(target).datetimebox("calendar");
                    //获得当前日历中选中的天数
                    var date = Calendar.calendar("options").current;
                    //获得datetimebox的内部时间微调器
                    var Spinner = $(target).datetimebox("spinner");
                    //获得月和日
                    var month = date.getMonth() + 1;
                    var day = date.getDate();
                    //拼接日期字符串
                    var comboTime = date.getFullYear() + "-" + (month < 10 ? ('0' + month) : month) + "-" + (day < 10 ? ('0' + day) : day) + " ";
                    //通过微调器获得时分秒
                    var hour = Spinner.timespinner("getHours");
                    var minute = Spinner.timespinner("getMinutes");
                    var seconds = Spinner.timespinner("getSeconds");
                    //拼接最后选择后填入input的时间,这个时间格式可以根据自己需要随便改变
                    comboTime += (hour < 10 ? ('0' + hour) : hour) + ":" + (minute < 10 ? ('0' + minute) : minute) + ":" + (seconds < 10 ? ('0' + seconds) : seconds);
        
                    $(target).combo("setText", comboTime);//设置组合框文本
                    //下面判断的是线路上第一家体验店和工厂是否是同一个省分,按需加相应的天数
                    var suppliersProvinceId = $('#plan_suppliersProvinceId').val();
                    var firstExpProvinceId = $('#plan_firstExpProvinceId').val();
                    //上面通过var day = date.getDate(); 通过下面的方法可以直接计算日期,然后通过相同的字符串拼接得出最后结果
                    if (suppliersProvinceId != firstExpProvinceId)
                    {
                        date.setDate(day + 5);
                    } else
                    {
                        date.setDate(day + 3);
                    }
                    var showMonth = date.getMonth() + 1;
                    var showDay = date.getDate();
                    var showTime = date.getFullYear() + "-" + (showMonth < 10 ? ('0' + showMonth) : showMonth) + "-" + (showDay < 10 ? ('0' + showDay) : showDay) + " ";
                    //给预计展示时间赋值
                    $('#showTime').datebox('setValue', showTime);
                    //隐藏日历
                    $(target).combo("hidePanel");
                }
                //加载上面编写的按钮给datetimebox
                $('#estimatedTime').datetimebox({
                    buttons: buttons
                });
        </script>
3.  上面两部分完成后,我发现不知道为什么总是让字变灰有效果,后面自定义的按钮没有效果,于是我就想是不是先后初始化的问题, 一开始我是把1中的代码写在2的上面,于是我把1的代码移到了最下面,终于有效果了
4.  还有一点很重要 Easyui的版本一定要在1.3.5之上, 这一点让我稍微走了点弯路,自己尝试了1.3.4 ,1.3.6和1.4.5三个版本,因为我们项目之前用的1.3.4,兼容性问题最后使用了1.3.6版本实现了我上面所说的所有需求
5.  `$(target).combo("setText", comboTime);`  
    这个不知道为什么 ,后面我在获取datetimebox的时候,获取不到里面的值,于是我用下面代码代替,然后可以成功获得值,具体原因不知道  
    `$(target).datetimebox('setValue',comboTime);`

[datetimebox _datebox]: /images/20220609/7584128f1d8643bea31071e7e02faf7b.png
[333ecd5ae7ee78d05d34685910d83f5a.png]: /images/20220609/4fbdff74be854b049fad836bbf538094.png