使用WdatePicker时间插件简单的控制页面上两个时间选择的前后范围

很多时候我们在一个交互的页面上需要显示两个时间让客户填写,比如开始时间&结束时间,顾名思义开始肯定不能大于结束,故使用WdatePicker插件选择时间的话可以很好的做好时间段的控制。看下面一个例子:

页面上的两个时间输入框:

[html]  view plain  copy
  1. 开始时间:  
  2. <input type="text" name="startDate" id="startDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" />  

 

[html]  view plain  copy
  1. 结束时间:  
  2. <input type="text" name="endDate" id="endDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" />  

假如使用js校验需要自己写,较为繁琐,使用插件提供的就方便的多,如下

[html]  view plain  copy
  1. 开始时间:  
  2. <input type="text" name="startDate" id="startDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'endDate\')}'})" />  

 

[html]  view plain  copy
  1. 结束时间:  
  2. <input type="text" name="endDate" id="endDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'startDate\')}'})" /> 

你可能感兴趣的:(JavaEE-Web前台,Web前端-Html)