特效预览
datepicker是一个基于jQuery的日期选择器插件,它支持范围选择、最大和最小设置、时间格式自由转换、UI美观、易于使用,参考了element-ui datePicker的设计。
它不依赖于其他库,只需要引入两个文件就可以使用。它还提供了一些自定义属性和事件回调函数,让你可以根据你的需求来调整日期选择器的功能和样式。
它的特点有:
- 支持时分秒年月日范围选择
- 最大最小值限制
- 限制开始结束时间间隔最大值
- 快捷选项简易配置
- 支持只选年月,只选年
使用方法
安装
首先你需要在页面中引入你要的文件:
// picker css(加载了fonts,具体看scss文件夹)
<link rel="stylesheet" href="css/datepicker.css">
// rely on plugins
<script src="js/plugins/jquery.js"></script>
<script src="js/plugins/moment.min.js"></script>
// picker js
<script src="js/datepicker.all.min.js"></script>
使用
然后再页面中就可以使用了:
<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>
通过下面的代码来初始化日期选择器:
// 年月日单个(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'
}]
});
你也可以使用日期范围:
<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>
//年月日范围
$('.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'
}]
});
你还可以指定日期范围的最小值、最大值和显示格式:
<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>
$('.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,'
}]
});
配置参数
配置参数如下:
参数名 | 默认值(可选值) | 作用 | 类型 |
---|---|---|---|
format | YYYY-MM-DD HH:mm:ss | datepicker 类型 | String |
isRange | false | 是否范围选择 | Boolean |
min | false | 时间最小值 | false/String |
max | false | 时间最大值 | false/String |
hasShortcut | false | 是否开启快捷选项 | Boolean |
shortcutOptions | [] | 快捷选项配置参数 | Array |
between | false | 开始和结束值之间的时间间隔天数(只对范围有效) | false/Number |
hide | function | 时间插件选择框隐藏时调用这个函数 | function |
show | function | 时间插件选择框显示后调用这个函数 | function |