很多时候我们在一个交互的页面上需要显示两个时间让客户填写,比如开始时间&结束时间,顾名思义开始肯定不能大于结束,故使用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. 微服务-技术专区-监控专区(Skywalking与Pinpoint) - 监控对比分析

    由于公司目前有200多微服务,微服务之间的调用关系错综复杂,调用关系人工维护基本不可能实现,需要调研一套全链路追踪方案,初步调研之后选取了skywalking和pinpoint进行对比; 选取skyw ...

  2. MYSQL中常用的工具

    1.mysql(客户端链接工具):   -u :指定用户名   -p:指定密码   -h:指定服务器ip或者域名   -P(大写):指定端口  例子:mysql -u root -h 202.194. ...

  3. mqtt haproxy 代理及负载搭建

    目录 mqtt 分布集群搭建 haproxy 安装配置 解压 安装 配置haproxy.cfg 启动haproxy 配置mqtt 测试 负载配置说明 负载均衡算法 ACL规则定义 全局配置 默认配置 ...

  4. Matplotlib_key_point

    Matplotlib官方入门教程: http://www.labri.fr/perso/nrougier/teaching/matplotlib/ 本文参考教程: http://codingpy.co ...

  5. package.json和package-lock.json的区别

    参考:https://blog.csdn.net/c2311156c/article/details/80320046 package.json: 主要用来定义项目中需要依赖的包 package-lo ...

  6. Node.js require 方法

    Node.js 中存在 4 类模块(原生模块和3种文件模块),尽管 require 方法极其简单,但是内部的加载却是十分复杂的,其加载优先级也各自不同

  7. 【归纳】springboot中的IOC注解:注册bean和使用bean

    目前了解的springboot中IOC注解主要分为两类: 1. 注册bean:@Component和@Repository.@Service.@Controller .@Configuration 共 ...

  8. 微信小程序学习一 微信小程序的四个基本文件

    微信小程序有四种类型的文件 js 类型文件 小程序的逻辑代码文件 小程序对js es6的处理比较友好,基本上我们的es6语法都需要使用babel插件去转化成es5(具体是什么原因,自己可以去了解一下) ...

  9. vue实现前后台交互

    首先需要前台先安装一个包 cnpm install axios --save 第二还需要解决跨域问题 在settings中添加一条中间件 MIDDLEWARE = [“corsheders.middl ...

  10. 阿里云重磅发布RDS for SQL Server AlwaysOn集群版

    2018年双十一刚过,阿里云数据库发布RDS for SQL Server AlwaysOn集群版,这是业界除微软云SQL Database外,首家云计算公司基于SQL Server最新AlwaysO ...