WdatePicker时间日期插件总结

一.引入插件

二.简单应用案例

1）.代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" id="planDateStart" style="width: 100px" name="planDateStart" value="2018-08-15" maxlength="10" class="Wdate" readonly="readonly" onclick="WdatePicker()"/></body><script type="text/javascript" src="js/jquery.js" ></script><script type="text/javascript" src="calendar/WdatePicker.js" ></script><script></script>
</html>

2）.效果图

三.详细用法

1）.没有对控件进行设置

<input class="Wdate" type="text" onfocus="WdatePicker()"/>

2）.限制日期范围 2017-08-15到2018-08-15

<input id="d411" class="Wdate" type="text" onfocus="WdatePicker({minDate: '2017-08-15', maxDate: '2018-08-15' })"/>

3）.限制时间范围 2018-07-15 10:30:00 到 2018-08-15 11:30:00

<input type="text" class="Wdate" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss',minDate: '2017-08-15 10:30:00', maxDate: '2018-08-15 11:30:00' })" value="2018-08-15 10:30:00"/>

4）.限制日期范围是2018年7月到2018年8月

<input type="text" class="Wdate"  onfocus="WdatePicker({dateFmt: 'yyyy年M月', minDate: '2018-7', maxDate: '2018-8' })"/>

5）.限制时间范围是 8:00:00到11:30:00

<input type="text" class="Wdate"  onfocus="WdatePicker({dateFmt: 'H:mm:ss', minDate: '8:00:00', maxDate: '11:30:00' })"/>

6）.只能选今天以前的日期(包括今天)

<input class="Wdate" type="text" onfocus="WdatePicker({maxDate: '%y-%M-%d' })"/>

7）.只能选今天以后的日期(不包括今天)

<input class="Wdate" type="text" onfocus="WdatePicker({minDate: '%y-%M-#{%d+1}' })"/>

8）.只能选本月日期

<input class="Wdate" type="text" onfocus="WdatePicker({minDate: '%y-%M-01', maxDate: '%y-%M-%ld' })"/>

9）.只能今天7:00:00到明天21:00:00

<input  class="Wdate" type="text"onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate: '%y-%M-%d 7:00:00', maxDate: '%y-%M-#{%d+1} 21:00:00' })"/>

10）.只能20小时前到30小时后

<input  class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate: '%y-%M-%d #{%H-20}:%m:%s' ,maxDate: '%y-%M-%d #{%H+30}:%m:%s' })"/>

11）.前面的日期不能大于后面的日期

<input id="myDate_1" class="Wdate" type="text" onFocus="WdatePicker({maxDate: '#F{$dp.$D(\'myDate_2\')||\'2020-10-01\'}' })"/>
<input id="myDate_2" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'myDate_1\')}' ,maxDate:'2020-10-01' })"/>

注意：两个日期的日期格式必须相同.dp. 相当于 document.getElementById 函数.那么为什么里面的 ’ 使用 \’ 呢? 那是因为 ” 和 ’ 都被外围的函数使用了,故使用转义符 \ ,否则会提示JS语法错误.所以您在其他地方使用时注意把 \’ 改成 ” 或者 ’ 来使用.#F{$dp.$D(\'myDate_2\')||\'2020-10-01\'} 表示当 myDate_2 为空时, 采用 2020-10-01 的值作为最大值

WdatePicker时间日期插件总结相关推荐

php获取laydate,解决laydate时间日期插件定位溢出
laydate是一款比较好用的网页时间日期插件,不过用起来有一些细节问题需要我们手动去解决!例如:laydate兼容bootstrap 1. 默认情况 laydate弹出层默认对齐input左边框 2 ...
html5 datepicker使用方法,WdatePicker.js时间日期插件的使用方法
本文介绍了WdatePicker.js时间插件使用,分享给大家,具体如下: 引用: 在项目中引用"plugin-clander"文件夹. 在html中引用"WdatePi ...
一款好用的JS时间日期插件layDate
觉得这个插件很不错,使用起来也很方便,推荐使用 1.插件截图 2.插件配置选择很多,配置也很简单,插件官网:https://www.layui.com/laydate/配置说得很明确,基本操作就是: ...
Yii2.0 时间日期插件之yii2-timepicker
1.与上一种相同,可以通过composer 安装,安装命令:composer require "janisto/yii2-timepicker" "*" 直接等 ...
java中jsp时间插件_日期插件 - WEB源码|JSP源码/Java|源代码 - 源码中国
日期插件\My97DatePicker\calendar.js 日期插件\My97DatePicker\lang\en.js 日期插件\My97DatePicker\lang\zh-cn.js 日期插 ...
WdatePicker，js日期插件，时间相加
//WdatePicker,js日期插件 //点击一个日期选择框后,得到日期,然后另一个日期选择框的日期自动加上一天 function pickedFunc(){ $ ...
WdatePicker日期插件的使用（简洁实例）
在程序开发中, 难免会遇到一些页面要求用户输入日期格式的数据,为了规避可能出现的各种日期格式的填写错乱,更为了改善用户体验,方便用户填写,一般采用日期插件,让用户可以直接选择日期或者时间,十分方便. ...
Java日期及时间库插件 -- Joda Time.
转载自 Java日期及时间库插件 -- Joda Time. 来到新公司工作也有一个多月了, 陆陆续续做了一些简单的项目. 今天做一个新东西的时候发现了 Joda Time的这个东西, 因为以前用 ...
flatpickr功能强大的日期时间选择器插件
flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...

WdatePicker时间日期插件总结

WdatePicker时间日期插件总结相关推荐

最新文章

热门文章