仿elementui的datapicker范围时间选择器特效插件

仿elementui的datapicker范围时间选择器特效插件

一款仿elementui的datapicker范围时间特效插件,包含范围选择,十分秒,最大值最小值设置,开始结束间隔设置等功能。

使用方法
Datepicker.js
支持十分秒年月日范围选择

最大最小值限制

限制开始结束时间间隔最大值

快捷选项简易配置

支持只选年月,只选年

浏览器安装
在HTML中,为元素添加标识符:

1
2
3
4
<div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day">
    <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
    <input type="text" autocomplete="off" name="" placeholder="选择日期" class="c-datepicker-data-input only-date" value="">
</div>

您现在需要做的只是实例化datepicker,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 年月日单个(J-datepicker-day对应html里的input父元素div)
$('.J-datepicker-day').datePicker({
    hasShortcut: true,
    format: 'YYYY-MM-DD',
    shortcutOptions: [{
        name: '今天',
        day: '0'
    }, {
        name: '昨天',
        day: '-1'
    }, {
        name: '一周前',
        day: '-7'
    }]
});

或带有范围引用的datepicker:

1
2
3
4
5
6
<div class="c-datepicker-date-editor  J-datepicker-range-day">
  <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
  <input placeholder="开始日期" name="" class="c-datepicker-data-input only-date" value="">
  <span class="c-datepicker-range-separator">-</span>
  <input placeholder="结束日期" name="" class="c-datepicker-data-input only-date" value="">
</div>

年月日范围

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('.J-datepicker-range-day').datePicker({
    hasShortcut: true,
    format: 'YYYY-MM-DD',
    isRange: true,
    shortcutOptions: [{
        name: '最近一周',
        day: '-7,0'
    }, {
        name: '最近一个月',
        day: '-30,0'
    }, {
        name: '最近三个月',
        day: '-90, 0'
    }]
});

或者使用范围,最小值和最大值,格式为'YYYY-MM-DD HH:mm:ss'

1
2
3
4
5
6
<div class="c-datepicker-date-editor J-datepicker-range">
  <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
  <input placeholder="开始日期" name="" class="c-datepicker-data-input" value="">
  <span class="c-datepicker-range-separator">-</span>
  <input placeholder="结束日期" name="" class="c-datepicker-data-input" value="">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$('.J-datepicker-range').datePicker({
    hasShortcut: true,
    min: '2018-08-31 00:00:00',
    max: '2019-08-31 23:59:59',
    isRange: true,
    shortcutOptions: [{
      name: '昨天',
      day: '-1,-1',
      time: '00:00:00,23:59:59'
    },{
      name: '最近一周',
      day: '-7,0',
      time:'00:00:00,'
    }, {
      name: '最近一个月',
      day: '-30,0',
      time: '00:00:00,'
    }, {
      name: '最近三个月',
      day: '-90, 0',
      time: '00:00:00,'
    }]
  });

文件信息:

    6

    发表评论