首页 > 代码库 > WdatePicker-限制日期选择
WdatePicker-限制日期选择
场景:
1. 开始时间,和结束时间最大选择今天。
2. 开始时间和结束时间的最大时间间隔为30天。
jsp代码:
<!-- 时间段 --> <form> <!-- 开始时间格式规则直接绑定在input上 --> 开始时间: <input type="text" style="line-height: 12px;" id="start_time_id" readonly="readonly" class="Wdate" name="start_time_name" onClick="WdatePicker({readOnly:true,dateFmt:‘yyyy-MM-dd ‘,maxDate:‘#F{$dp.$D(\‘end_time_id\‘)||\‘%y-%M-%d\‘}‘,minDate:‘#F{$dp.$D(\‘end_time_id\‘,{d:-29})}‘})" onchange="setEndTimeDurationWhileStartTimeChange();"/> <!-- 结束时间格式规则在js中进行及时调整 --> 结束时间: <input type="text" style="line-height: 12px;" id="end_time_id" class="Wdate" name="end_time_name" readonly="readonly"/> </form>
js代码:
// 结束时间:初始默认最大日期为今天 $(function(){ // 设置结束时间的最大可取值为today $(‘#end_time_id‘).unbind("click"); $(‘#end_time_id‘).bind("click",function(){ WdatePicker({ readOnly:true, dateFmt:‘yyyy-MM-dd ‘, minDate:‘#F{$dp.$D(\‘start_time_id\‘)}‘, maxDate:‘#F{\‘%y-%M-%d\‘}‘ }); }); }); // 开始时间值改变时,改变结束时间值得范围 function setEndTimeDurationWhileStartTimeChange(){ var start = $(‘#start_time_id‘).val(); // 格式:2017-05-01 // 如果选中了开始时间 if(start != "" && start != null){ // endMaxDate = 开始时间+29天 start = start.replace(/-/g,"/"); var endMaxDate = new Date(start); endMaxDate.setDate(endMaxDate.getDate()+29); // today = 今天 var today = new Date(); today.setHours(0); today.setMinutes(0); today.setSeconds(0); today.setMilliseconds(0); // 如果endMaxDate>today if(endMaxDate.getTime()>today.getTime()){ // 设置结束时间的最大可取值为today $(‘#end_time_id‘).unbind("click"); $(‘#end_time_id‘).bind("click",function(){ WdatePicker({ readOnly:true, dateFmt:‘yyyy-MM-dd ‘, minDate:‘#F{$dp.$D(\‘start_time_id\‘)}‘, maxDate:‘#F{\‘%y-%M-%d\‘}‘ }); }); }else{ // 设置结束时间的最大可取值为endMaxDate $(‘#end_time_id‘).unbind("click"); $(‘#end_time_id‘).bind("click",function(){ WdatePicker({ readOnly:true, dateFmt:‘yyyy-MM-dd ‘, minDate:‘#F{$dp.$D(\‘start_time_id\‘)}‘, maxDate:‘#F{$dp.$D(\‘start_time_id\‘,{d:29})}‘ }); }); } } // 如果清空了开始时间,重设结束时间的范围,到今天为止 else{ // 设置结束时间的最大可取值为today $(‘#end_time_id‘).unbind("click"); $(‘#end_time_id‘).bind("click",function(){ WdatePicker({ readOnly:true, dateFmt:‘yyyy-MM-dd ‘, minDate:‘#F{$dp.$D(\‘start_time_id\‘)}‘, maxDate:‘#F{\‘%y-%M-%d\‘}‘ }); }); } }
WdatePicker-限制日期选择
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。