WdatePicker.js时间日期插件的使用方法


Posted in Javascript onJuly 26, 2017

本文介绍了WdatePicker.js时间插件使用,分享给大家,具体如下:

引用:

在项目中引用“plugin-clander”文件夹。

在html中引用”WdatePicker.js”即可。

<script src="js/plugin-clander/WdatePicker.js"></script>

1.没有对控件进行设置

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

2.限制日期的范围是 2006-09-10到2008-12-20

<input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate: '2006-09-10', maxDate: '2008-12-20' })"/>

3.限制日期的范围是 2008-3-8 11:30:00 到 2008-3-10 20:59:30

<input type="text" class="Wdate" id="d412" 
onfocus="WdatePicker({skin:'whyGreen',dateFmt: 'yyyy-MM-dd HH:mm:ss', 
minDate: '2008-03-08 11:30:00', maxDate: '2008-03-10 20:59:30' })" value="2008-03-09 11:00:00"/>

4.限制日期的范围是 2008年2月 到 2008年10月

<input type="text" class="Wdate" id="d413" onfocus="WdatePicker({dateFmt: 'yyyy年M月', minDate: '2008-2', maxDate: '2008-10' })"/>

5.限制日期的范围是 8:00:00 到 11:30:00

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

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

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

7.使用了运算表达式 只能选择今天以后的日期(不包括今天)

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

8. 只能选择本月的日期1号至本月最后一天

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

9.只能选择今天7:00:00至明天21:00:00的日期

<input id="d424" 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 id="d425" 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. 前面的日期不能大于后面的日期且两个日期都不能大于 2020-10-01

合同有效期从 到

[注意: 两个日期的日期格式必须相同.

dp. 相当于 document.getElementByIdx_x 函数.

那么为什么里面的 ' 使用 \' 呢? 那是因为 ” 和 ' 都被外围的函数使用了,故使用转义符 \ ,否则会提示JS语法错误.所以您在其他地方使用时注意把 \' 改成 ” 或者 ' 来使用.

#F{$dp.$D(\'d4312\')||\'2020-10-01\'} 表示当 d4312 为空时, 采用 2020-10-01 的值作为最大值]

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

WdatePicker.js时间插件的取值和赋值:

引用:

<script src="js/jquery-2.1.1.min.js"></script>
 <script src="js/plugin-clander/WdatePicker.js"></script>

html:

<input class="div-Wdate" type="text"  onfocus="WdatePicker()"/>
  <p><button class="tijiaoBtn">提交</button></p>

js:

//赋值
 $(".div-Wdate").val("2019-01-01");
 //取值
 $(".tijiaoBtn").on("click",function(){
  console.log($(".div-Wdate").val());
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
纯JS代码实现气泡效果
May 04 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
js实现楼层导航功能
Feb 23 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 #Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 #Javascript
JS数组操作中的经典算法实例讲解
Jul 26 #Javascript
你有必要知道的10个JavaScript难点
Jul 25 #Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 #Javascript
jQuery实现键盘回车搜索功能
Jul 25 #jQuery
简单实现js鼠标跟随效果
Aug 02 #Javascript
You might like
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
python中sys.argv参数用法实例分析
2015/05/20 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
Python with语句和过程抽取思想
2019/12/23 Python
django rest framework serializers序列化实例
2020/05/13 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
中科软笔试题和面试题
2014/10/07 面试题
师生聚会感言
2014/01/26 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
2015暑假假期总结
2015/07/13 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python