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

最新推荐文章于 2024-07-04 17:15:56 发布

转载最新推荐文章于 2024-07-04 17:15:56 发布 · 786 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/dongh/p/6991555.html

文章标签：

#html #html5 #javascript

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用WdatePicker插件在网页中简单有效地设置开始时间和结束时间的前后顺序限制。通过设置maxDate和minDate属性，可以确保开始时间不会超过结束时间，简化了JavaScript的校验过程，提高了用户体验。

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

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

开始时间：  
<input type="text" name="startDate" id="startDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" />  

结束时间:  
<input type="text" name="endDate" id="endDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" />

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

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

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