很多时候我们在一个交互的页面上需要显示两个时间让客户填写,比如开始时间&结束时间,顾名思义开始肯定不能大于结束,故使用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\')}'})" />

使用WdatePicker时间插件简单的控制页面上两个时间选择的前后范围的更多相关文章

  1. selenium 定位 页面上两个完全一样的元素

    在测试过程中发现页面上有两个保存按钮的元素的xpath一模一样,如下图: google了好久才找到解决办法,发现自己还是比较弱!!!解决方法如下: selenium.click("xpath ...

  2. WdatePicker时间插件 有百度云下载 jsp界面选择时间的简单方法

      链接:https://pan.baidu.com/s/1XCod602gCMv-qMQ4fMOLbg 提取码:ok8i 复制这段内容后打开百度网盘手机App,操作更方便哦 把东西复制到项目.导入j ...

  3. WdatePicker 时间插件

    1.下载地址:链接:https://pan.baidu.com/s/1ggusfZX 密码:gu22 常用法: <input type="text" class=" ...

  4. WdatePicker时间插件

    next_door_boy CnBlogs Home New Post Contact Admin Rss Posts - 14  Articles - 5  Comments - 0  WdateP ...

  5. 如何利用CSS中的ime-mode用来控制页面上文本框中的全角/半角输入

    css 之 ime-mode语法:ime-mode : auto | active | inactive | disabled取值:auto : 默认值.不影响ime的状态.与不指定 ime-mode ...

  6. Mint-UI 的 DatetimePicker 日期时间插件的安装与使用

    简介:Mint-UI是饿了么出品的基于vue的移动端组件库(element-ui是桌面端) 官网:http://mint-ui.github.io/docs/#/zh-cn2 项目环境:vue-cli ...

  7. 用JavaScript探测页面上的广告是否被AdBlock屏蔽了的方法

    每个人都讨厌广告.看电视.看电影.看优酷.看网页时,对满天飞的广告也是深恶痛绝.广告是一个不招人喜欢的东西.但是,对一个中小网站站长/博客主来说,广告几乎是唯一的能成支持网站/博客正常运转的资金来源. ...

  8. js使用my97插件显示当前时间,且select控制计算时间差

    做页面需要两个时间输入框一个显示当前时间,一个显示之前的时间,并且需要一个select下拉框控制两个时间输入框之间的差,效果如下图: 这里使用的是My97DatePicer,简单方便,引入my97插件 ...

  9. WdatePicker()时间控制方式(转载+原创)

     控制时间在制定范围内: <input class="wzsrk" name="startDateStr" id="startDateStr ...

随机推荐

  1. xampp环境下,配置Zend Studio调试php(XDebug) 转摘:http://www.cnblogs.com/tuyithief/archive/2011/06/02/2068431.html

    先说一下文件版本,xampp 1.7.4,php 5.3.5. 走了很多弯路,截止目前,ZendDebugger在php 5.3.x下,只有nts版本,既non Thread Safety(具体什么意 ...

  2. 2018-2-13-win10-UWP-单元测试

    title author date CreateTime categories win10 UWP 单元测试 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...

  3. Codeforces 1188B 式子转化

    思路:看到(a + b)想到乘上(a - b)变成平方差展开(并没有想到2333), 两边同时乘上a - b, 最后式子转化成了a ^ 4 - ka = b ^ 4 - kb,剩下的就水到渠成了. 0 ...

  4. 理解Python中的继承规则和继承顺序

    先来看一段代码: class First(object): def __init__(self): print ("first") class Second(object): de ...

  5. Bazel: Ubuntu安装bazel-version-installer-os.sh失败的解决方法。

    使用 bash ./bazel-version-installer-os.sh from: http://www.cnblogs.com/Need4Speak/p/5438240.html

  6. 百度地图,删除marker,创建marker

    -------------------[删除marker]-----------------------------success: function(data){ if(data.length> ...

  7. html2canvas截图白边显示问题

    html2canvas(document.getElementById('resource_chart'),{ useCORS:true, logging:false, width:$('#resou ...

  8. Android中的ImageView的getDrawableCache获取背景图片的时候注意的问题

    获取ImageView的背景图片使用getDrawableCache方法,不要使用getDrawable方法,后者获取不到图片的. 1.在调用imageView.getDrawableCache()之 ...

  9. SCP-bzoj-1058

    项目编号:bzoj-1058 项目等级:Safe 项目描述: 戳这里 特殊收容措施: STL好题.维护两个set,一个存储数列里相邻元素差,另一个存储整个数列. 对于MIN_SORT_GAP操作,维护 ...

  10. paper 141:some paper with ComputerCV、MachineLearning[转]

    copy from:http://blog.csdn.net/zouxy09/article/details/8550952 一.特征提取Feature Extraction: ·         S ...