jinjian1.1/uni_modules/pdd-date-picker/readme.md

1.6 KiB
Raw Permalink Blame History

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 1970 默认日期,分别对应年月日的索引,比如:[0,0,0] 对应1970-01-01

示例

<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>