easyui-datebox不能選擇未來時間的解決方案
阿新 • • 發佈：2019-01-25
對於easyui並未提供對日期控制元件的時間校驗，然而有時候我們並不希望用於能選擇未來的時間。下面給出兩個簡單的應對方案。
html檔案如下：
<body>
<div style="display:inline-block;width:100px;">請選擇日期：</div>
<input class="easyui-datebox" id="testDate" data-options="required:true,validType:'checkDate'"/>
</body>方案1，通過datebox的onSelect時間重置選擇的時間。
$("#testDate").datebox({ onSelect:function(date){ var nowDate = new Date(); if(date>nowDate){ $("#testDate").datebox("setValue",""); } } });
方案2，新增校驗方法。
$.extend($.fn.datebox.defaults.rules,{ checkDate:{ validator:function(value, param){ var nowDate = new Date(); var dateList = value.split("/"); var chooseData = new Date(dateList[2],dateList[0]-1,dateList[1]); return nowDate>=chooseData; }, message:"不能選擇未來時間" } });
方案2只有在datebox的input框獲取焦點的時候才會顯示提示，如果禁用了輸入則不會生效。
jquery-ui中的datepicker能更好的解決日期限制問題，建議有興趣的朋友可以去看看。