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

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

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

所以：现记录并分享

1.下载datepicker第三方插件

链接：

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

提取码：0pji

2.如下代码所示：

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

<!DOCTYPE html>
<html>
<title></title>

<!-- 引入datepicker.css -->
<link rel="stylesheet" type="text/css" href="datepicker/skin/default/datepicker.css">
<!-- 引入easyui.css -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.5.4/themes/default/easyui.css">
<!-- 使用jQuery操作 -->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
<!-- 使用wdatepicker.js -->
<script type="text/javascript" src="datepicker/WdatePicker.js"></script>

<body>
  <!--  class="Wdate easyui-validbox" -->
  <input required="required" id="start_time" class="Wdate easyui-validatebox" >
  <input required="required" id="end_time" class="Wdate easyui-validatebox"  /><br><br>

<script type="text/javascript">
  $("#start_time").click(function () {
    WdatePicker({
      el:this,
      lang:'auto',
      dateFmt:'yyyy-MM-dd HH:mm:ss',
      // minDate:'#F{$dp.$D(\'start_time\')}',
      maxDate: '#F{$dp.$D(\'end_time\')||\'%y-%M-%d %H:%m:%s\'}',
      // maxDate: '#F{$dp.$D(\'end_time\')}',
      readOnly: true
    });
  });

  $("#end_time").click(function () {
    WdatePicker({
      el:this,
      lang:'auto',
      dateFmt:'yyyy-MM-dd HH:mm:ss',
      minDate: '#F{$dp.$D(\'start_time\')}',
      maxDate: '#F{$dp.$D(\'start_time\',{d:+31})}',
      readOnly: true
    });
  });
</script>

</body>
</html>

效果图：

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

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) 。
-----------------------------------------
<script>
   $("#select-time").click(function () {
      WdatePicker({
          el: this, //点击对象id，一般可省略el
          lang: 'auto', //语言选择，一般用auto
          dateFmt: 'yyyy-MM-dd HH:mm:ss', //时间显示格式，年月日 时分秒，年月日就是yyyy-MM-dd
          minDate: '#F{$dp.$D(\'inputstarttime\')}', //最小日期
          maxDate: '%y-%M-%d', //最大日期（当前时间）
          readOnly: true, //是否只读
          isShowClear: true, //是否显示“清空”按钮
          isShowOK: true, //是否显示“确定”按钮
          isShowToday: true, //是否显示“今天”按钮
          autoPickDate: true //为false时 点日期的时候不自动输入,而是要通过确定才能输入，为true时 即点击日期即可返回日期值，为null时(推荐使用) 如果有时间置为false 否则置为true
      })
  })
</script>

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事件中返回选择后的日期对象