一款基于zepto的日期选择,可适用于移动端(主要)和PC端。
datePicker演示:demo
- 首先引入插件的样式
zepto.datepicker.min.css
<link rel="stylesheet" href="zepto.datepicker.min.css">- 然后再引入
zepto.min.js和zepto.datepicker.min.js(demo目录已压缩)
<script src="zepto.min.js"></script>
<script src="zepto.datepicker.min.js"></script>- 最后在页面里,为需要的
<input>元素添加方法。 相关示例代码:
<input type="text" placeholder="请选择日期" class="input-date" />
<script>
$('.input-date').datePicker();
</script>除此之外,datePicker 还提供了 type、date yearCols 等一些自定义属性。你可以像这样配置它们:
$('.input-date-custom').datePicker({
date: '2015-05-01',
callback: (date) => {
console.log(date);
}
})上面的代码表示,用户自定义了日期 2015-05-01,并且每次选择完,将回调输出输入框的日期。
相关参数的具体使用,详见下表。
datePicker 相关参数配置如下:
| 参数 | 描述 | 默认值 | 格式 |
|---|---|---|---|
| type | 日期类型 | date |
字符串,你也可设置 date-time,表示包含时分 |
| date | 初始日期 | 当前时间 | YYYY-MM-DD hh:ss |
| yearCols | 可选的年份 | [2000, ..., 2030] | 数组 |
| monthCols | 可选的月份 | [01, ..., 12] | 数组 |
| dayCols | 可选择的天 | [01, ..., 31] | 数组 |
| hourCols | 可选择的小时 | [00, ..., 23] | 数组 |
| minuteCols | 可选择的分钟 | [00, ..., 59] | 数组 |
| titleDisplay | 是否显示头部 | true | 布尔值 |
| contentPickerItemH | 日期行高 | 40 | 数字 |
| contentPickerItemShowNum | 日期显示行数,必须为奇数 | 5 | 数字 |
| callback | 每次选择后的回调 | 空函数 | 参数为选择后的日期 |