EasyUI datebox datetimebox的自定義按鈕 按條件設置日期的不可用 js日期計算

具體開發情景

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,下面是效果

   這裏只有因爲是月末,效果不太明顯,只有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);