68 lines
1.6 KiB
Markdown
68 lines
1.6 KiB
Markdown
|
# pdd-date-picker
|
|||
|
|
|
|||
|
|
这是一个轻量的年月日选择器，简单易用，可自己定制化改造。支持的功能如下：
|
|||
|
|
|
|||
|
|
1. 年月日选择
|
|||
|
|
2. 自定义标题
|
|||
|
|
3. 自定义按钮文案
|
|||
|
|
4. 自定义按钮文案颜色
|
|||
|
|
5. 自定义开始年份
|
|||
|
|
6. 自定义默认日期
|
|||
|
|
7. 插件代码清晰，不满意可以自己DIY
|
|||
|
|
|
|||
|
|
# 参数
|
|||
|
|
|
|||
|
|
| 参数 | 类型 | 默认值 | 说明 |
|
|||
|
|
| --- | --- | --- | --- |
|
|||
|
|
| title | String | '请选择日期' | 标题 |
|
|||
|
|
| limit | Number | 50 | 年份上限 |
|
|||
|
|
| leftText | String | 取消 | 左侧文字 |
|
|||
|
|
| leftTextColor | String | #4E5969 | 左侧文字颜色 |
|
|||
|
|
| rightText | String | 确认 | 右侧文字 |
|
|||
|
|
| rightTextColor | String | #1677FF | 右侧文字颜色 |
|
|||
|
|
| startYear | Number | 1970 | 开始年份 |
|
|||
|
|
| defaultDate | Array<Number> | 1970 | 默认日期，分别对应年月日的索引，比如：[0,0,0] 对应1970-01-01 |
|
|||
|
|
|
|||
|
|
# 示例
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<button type="default" @click="open">打开选择器</button>
|
|||
|
|
<text>当前选择时间是：{{ dateValue }}</text>
|
|||
|
|
<!-- 日期选择器 -->
|
|||
|
|
<pdd-date-picker ref="pDataSelect" @change="handleChangeDate" :title="title" />
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import pddDatePicker from '../../components/pdd-date-picker/index.vue'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
pddDatePicker
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
title: '自定义标题',
|
|||
|
|
dateValue: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/**
|
|||
|
|
* @description 打开选择框
|
|||
|
|
*/
|
|||
|
|
open() {
|
|||
|
|
this.$refs.pDataSelect.open()
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* @description 日期改变回调
|
|||
|
|
*/
|
|||
|
|
handleChangeDate(date) {
|
|||
|
|
console.log(date)
|
|||
|
|
this.dateValue = date
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
```
|