点击这里可跳转到演示页面,请在移动端打开或者使用浏览器移动端调试工具打开。
- Github下载:下载地址
- npm下载:
npm i hg-datepicker
首先引入文件
<link rel="stylesheet" type="text/css" href="./picker.min.css" />
<script src="./datepicker.min.js"></script>
实例化日期选择器new DatePicker(option)
new DatePicker({
inputId: 'date-input', // 目标DOM元素ID
success: function(arr) { // 回调函数
console.log(arr);
}
});
如果你使用构建工具,可以这样引入
import 'hg-datepicker/picker.min.css';
import DatePicker from 'hg-datepicker';
在vue
中实例化插件
mounted () {
this.$nextTick(() => {
new DatePicker({
inputId: 'date-input', // 目标DOM元素ID
success: function(arr) { // 回调函数
console.log(arr);
}
});
});
}
option
是一个配置项的对象,可以接受如下选项:
key | value | description |
---|---|---|
inputId | String | 目标DOM元素ID,必填 |
success | Funtion | 确定后的回调函数,第一个参数为表示时间的数组,如[2002,2,2]表示2002年2月2号,必填 |
cancel | Funtion | 点击取消按钮或者背景后的回调函数,选填 |
type | time | dateTime | date |
日期选择器的类型,time (分时),dateTime (年月日时分),默认 date (年月日) |
start | Array<Number> | 开始时间的数组,默认四年前 |
end | Array<Number> | 结束时间的数组,默认四年后 |
firstTime | Array<Number> | 初始显示时间的数组,默认当前时间 |
title | String | 选择器标题,默认为空 |
sureText | String | 确定按钮文本,默认为“确定” |
cancelText | String | 取消按钮文本,默认为“取消” |
hasSuffix | yes | no |
是否添加时间单位,默认 yes |
hasZero | yes | no |
一位数前是否加零,默认 yes |
a | Number | 惯性滚动加速度(正数, 单位 px/(ms * ms)),规定滚动阻力,加速度越小缓冲距离越长,默认 0.001 |
style | Obeject | 包含样式配置的对象 |
style
对象可以接受如下选项:
key | value | description |
---|---|---|
liHeight | Number | 每一个选择栏的高度(px),默认 40 |
btnHeight | Number | 按钮栏的高度(px),默认 44 |
btnOffset | String | 按钮离边框的距离,默认 20px |
titleColor | String | 选择器标题的字体颜色 |
sureColor | String | 选择器确定按钮的字体颜色 |
cancelColor | String | 选择器取消按钮的字体颜色 |
btnBgColor | String | 选择器按钮栏的背景颜色 |
contentColor | String | 选择器选择区域的文字颜色 |
contentBgColor | String | 选择器选择区域的背景颜色 |
upShadowColor | String | 选择器顶部朦层颜色 |
downShadowColor | String | 选择器底部朦层颜色 |
lineColor | String | 选择器分隔线颜色 |