https://github.com/pmj136/xp-picker
A time-selector component ,based on Uniapp
https://github.com/pmj136/xp-picker
picker time-picker uniapp
Last synced: about 1 year ago
JSON representation
A time-selector component ,based on Uniapp
- Host: GitHub
- URL: https://github.com/pmj136/xp-picker
- Owner: Pmj136
- Created: 2020-12-30T16:09:49.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-04-01T12:41:20.000Z (over 4 years ago)
- Last Synced: 2025-04-12T19:40:00.171Z (over 1 year ago)
- Topics: picker, time-picker, uniapp
- Language: Vue
- Homepage:
- Size: 102 KB
- Stars: 101
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# xp-picker
###
- 上一代e-picker-plus的优化版本，适配任何可选列的配置，包括但不限于'y-m-d h:i'、'm-d'等，详情请看文档
- 功能强、通用性强、多端兼容。兼容h5、微信小程序、QQ小程序(其他平台小程序未作测试)与app
### 一、使用示例
#### 示例1：函数式打开picker，通过 this.$refs[ref].show()
```html
开启
```
```js
export default {
methods: {
show() {
this.$refs.picker.show()
},
confirm(e) {
console.log(e)
}
}
}
```
#### 示例2：xp-picker包含一个默认插槽，点击内容直接打开picker弹窗
```html
打开
```
```js
export default {
methods: {
confirm(e) {
console.log(e)
}
}
}
```
### 二、属性介绍
| 字段 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | -------- | ---- | ---------------------- | ------------------------------- |
| mode | String | 否 | ymd | 见下方mode 详细介绍 |
| height | Number | 否 | 35 | 选择器的高度，单位vh |
| animation | Boolean| 否 | true | 打开和关闭是否使用动画效果 |
| value | String | 否 | 当前时间 | 打开选择器时默认选中的时间,详细见下方使用方式 |
| year-range |Array | 否 | [2016,null] | 数组第一项代表开始年份(配置为null将使用默认2016)，第二项代表结束年份(配置null将使用本年)，配置示例:[2010,null] |
| history | Boolean| 否 | false | 每次打开picker时，是否保持用户最后一次选择的历史时间，若为fasle,则每次打开显示当前时间|
| action-position| String|否 |top | 可选 bottom,设置"取消"和"确定"按钮的位置 |
| ~~startRule~~ | | | | v2.0已移除 |
| ~~endRule~~ | | | | v2.0已移除 |
| ~~start~~ | | | | v1.2已移除 |
| ~~end~~ | | | | v1.2已移除 |
| ~~errorMsg~~ | | | | v1.2已移除 |
### 1、mode的使用(y年；m月；d日；h时；i分；s秒)
| 可选类型 | 描述 |
| -------| --------------------------------- |
| y | picker将只显示 '年'一列 |
| ym | picker将只显示 '年月'两列 |
| ymd | picker将只显示 '年月日'两列 |
| ymdh | picker将只显示 '年月日时'四列 |
| ymdhi | picker将显示 '年月日时分'五列 |
| ymdhis | picker将显示 '年月日时分秒'六列 |
| m | 略…… |
| d | 略…… |
| h | 略…… |
| i | 略…… |
| s | 略…… |
| md |略…… |
| hi | 略…… |
| is | 略…… |
| his | 略…… |
| mdh | 略…… |
| mdhi | 略…… |
| mdhis | 略…… |
未出现在表格中的配置代表不支持。但是xp-picker可以适配任何自定义列，比如：其中'dh'未预定义，因此只需在源码加一行dh的预定义即可(util.js/getLocalTime)，不会联系作者，热心答复
### 2、value的使用
此选项用于自定义picker打开时的显示时间，同样需要与mode对应
| mode | value格式（必须） |
| --------- | --------------------------------- |
| ymd | yyyy-MM-dd |
| his | HH:mm:ss |
| …… | …… |
### 三、事件
| 字段 | 描述 |
| --------- | ------------------------ |
| confirm | 点击确定按钮的响应事件 |
| cancel | 关闭picker的响应事件 |
#### confirm 事件返回属性介绍
| 属性 | 类型 | 描述 |
| --------- | ------------------------ |--------------------------|
| ~~isOverTime~~ | | v2.0.0已移除|
| value | String |选择的时间 例如:'2020-12-06'|
| ~~resultArr~~ | |v2.1.0已移除|
| timestamp | BigInt |返回的时间戳，支持理论可转换的时间|
### 四、插槽
可使用此方式打开picker弹窗
### 五、讨论
- 若你有需求是：只要显示 '月'和'日' 即 mode='md'，没有 '年' 这一列。而'日期'这一列考虑平闰年，也由年份决定，因此这类mode的默认年份是本年，
picker智能的解决了平闰年的问题；以此类推，没有 年和月 ，picker将默认本年本月
- 源码采用原生picker-view组件搭建的界面，因此界面可以根据自己的界面需求添砖加瓦