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 相关文章推荐
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
jquery实现数字输入框
Feb 22 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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删除数组中的特定元素的代码
2012/06/28 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
json 定义
2008/06/10 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
jquery实现拖动效果
2016/08/10 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
Python随机生成彩票号码的方法
2015/03/05 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
python如何实时获取tcpdump输出
2020/09/16 Python
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
大学辅导员事迹材料
2014/02/05 职场文书
学习保证书范文
2014/04/30 职场文书
李培根演讲稿
2014/05/22 职场文书
通知格式
2015/04/27 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
SpringBoot集成Redis的思路详解
2021/10/16 Redis
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server