【JavaScript】使用WdatePicker.js插件限选一个时间范围（例如一个月）

需求：公司处理的业务数据比较大，单张表就是几十上百万的。如果不加入指定的条件，指定的时间，限定条数的查。经过多张表的关联查询sql执行速度将会变得特别慢。之前限定时间都是通过js弹框，但是原本模块中有相似代码控制的代码，用户体验与弹框截然不同。

所以：现记录并分享

 

1.下载datepicker第三方插件

链接：

https://pan.baidu.com/s/1uZQngPwkiIk23momaCSXlg 

提取码：0pji 
 

2.如下代码所示：

官方文档：http://www.my97.net/demo/index.htm

 

 

效果图：

 1，相关参数

日期格式表 
格式 说明 
y 将年份表示为最多两位数字。如果年份多于两位数，则结果中仅显示两位低位数。 
yy 同上，如果小于两位数，前面补零。 
yyy 将年份表示为三位数字。如果少于三位数，前面补零。 
yyyy 将年份表示为四位数字。如果少于四位数，前面补零。 
M 将月份表示为从 1 至 12 的数字 
MM 同上，如果小于两位数，前面补零。 
d 将月中日期表示为从 1 至 31 的数字。 
dd 同上，如果小于两位数，前面补零。 
H 将小时表示为从 0 至 23 的数字。 
HH 同上，如果小于两位数，前面补零。 
m 将分钟表示为从 0 至 59 的数字。 
mm 同上，如果小于两位数，前面补零。 
s 将秒表示为从 0 至 59 的数字。 
ss 同上，如果小于两位数，前面补零。 
w 返回星期对应的数字 0 (星期天) - 6 (星期六) 。 
D 返回星期的缩写 一 至 六 (英文状态下 Sun to Sat) 。 
W 返回周对应的数字 (1 - 53) 。 
WW 同上，如果小于两位数，前面补零 (01 - 53) 。
-----------------------------------------

 

2，内置函数和属性

 

函数名	返回值类型	作用域	参数	描述
$dp.show	void	全局	无	显示日期选择框
$dp.hide	void	全局	无	隐藏日期选择框
$dp.unbind         (4.8beta4新增)	void	全局	el [string/object]:取消绑定的对象,可传入dom对象或者是对象的ID	让传入的对象取消日期控件绑定
$dp.$D	String	全局	id [string]: 对象的ID arg [object]: 日期差量,可以设置成 {y:[值],M:[值],d:[值],H:[值],m:[值],s:[值]} 属性 y,M,d,H,m,s 分别代表 年月日时分秒 {M:3,d:7} 表示 3个月零7天 {d:1,H:1} 表示1天多1小时	将id对应的日期框中的日期字符串,加上定义的日期差量,返回使用real格式化后的日期串 参考 示例 4-3-2
$dp.$DV	String	全局	v [string]: 日期字符串 arg [object]: 同上例的arg	将传入的日期字符串,加上定义的日期差量,返回使用real格式化后的日期串 参考 示例 4-3-3
以下函数只在事件自定义函数中有效
$dp.cal.getP	String	事件function	p [string]: 属性名称 yMdHmswWD分别代表年,月,日,时,分,秒,星期(0-6),周(1-52),星期(一-六) f [string]: format 格式字符串           设置方法参考 1.4 自定义格式	返回所指定属性被格式字符串格式化后的值[单属性],在changing,picking,clearing事件中返回选择前的值 参考 示例 1-2-2
$dp.cal.getDateStr	String	事件function	f [string]: 格式字符串,为空时使用dateFmt	返回所指定属性被格式字符串格式化后的值[整个值],在changing,picking,clearing事件中返回选择前的值
$dp.cal.getNewP	String	事件function	用法同$dp.cal.getP	返回所指定属性被格式字符串格式化后的值[单属性],在changing,picking,clearing事件中返回选择后的值
$dp.cal.getNewDateStr	String	事件function	用法同$dp.cal.getDateStr	返回所指定属性被格式字符串格式化后的值[整个值],在changing,picking,clearing事件中返回选择后的值

 

属性名	返回值类型	作用域	参数	描述
$dp.cal.date	object	事件function	$dp.cal.date.y:返回 年 $dp.cal.date.M:返回 月 $dp.cal.date.d:返回 日 $dp.cal.date.H:返回 时 $dp.cal.date.m:返回 分 $dp.cal.date.s:返回 秒	在changing,picking,clearing事件中返回选择前的日期对象
$dp.cal.newdate	object	事件function	用法同$dp.cal.date	在changing,picking,clearing事件中返回选择后的日期对象

 

------------------------------------------------

关注小编微信公众号获取更多资源

----------------------------------------------