DateTimePicker 时间选择器

预览

01:38



---

组件名：rice-button

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

通过 type 属性可以控制选项的类型，默认为年月日 date，可选值见下
可以在 confirm 事件中获取到当前选择的日期时间。
默认选择的日期为当前的日期，如果需要默认选中其他的日期，可以使用 model-value 属性。

警告

注意：目前暂不推荐使用 v-model 进行绑定，如果使用v-model 进行绑定，那么返回的日期格式恒为 YYYY-MM-DD HH:mm:ss，

<rice-datetime-picker v-model:show="showDatePicker" type="date" @confirm="onConfirm"/>

<script setup lang="ts">
import {DateTimePickerExtend } from "@/uni_modules/rice-ui"
const showDatePicker=ref(false)
const onConfirm=(value:string, extend:DateTimePickerExtend)=>{
	console.log('value',value,'extend', extend)
}
</script>

过滤选项

通过传入 filter 函数可以对选项数组进行过滤

<rice-datetime-picker v-model:show="showFilterPicker" :filter="filter" toolbar-position="top" title="选择偶数年"/>

<script setup>
import { DateTimePickerUnit, PickerOption } from "@/uni_modules/rice-ui"
const showFilterPicker=ref(false)
// 过滤奇数年份
const filter = (type : DateTimePickerUnit, options : PickerOption[]) => {
  if (type == 'year') {
    return options.filter(option => (option.value as number) % 2 != 0)
  }
  return options
}

</script>

格式化选项

通过传入 formatter 函数，可以对选项的文字进行格式化处理

<rice-datetime-picker v-model:show="showFormatPicker" :formatter="formatter"></rice-datetime-picker>

<script setup>
const showFormatPicker = ref(false)
import { DateTimePickerUnit, PickerOption } from "@/uni_modules/rice-ui"
const formatter = (type : DateTimePickerUnit, option : PickerOption) => {
  if (type == 'year') {
    option.text = `${option.text}年`
  }
  if (type == 'month') {
    option.text = `${option.text}月`
  }
  if (type == 'day') {
    option.text = `${option.text}日`
  }

  return option
}

</script>

限制最大值和最小值

通过 min-date 和 max-date 可以限制选项的最大值和最小值

<rice-datetime-picker v-model:show="showLimitPicker" min-date="2021-01-01" max-date="2025-12-01"
model-value="2022-01-02"></rice-datetime-picker>

不使用 popup

设置 use-popup的值为false，即可不使用popup展示

<rice-datetime-picker :use-popup="false" toolbar-position="none"></rice-datetime-picker>

API

props

参数	说明	类型	默认值
model-value	绑定值	string	当前日期
type	时间类型，可选值：年：year、年月：month、年月日：date、时分：minute、时分秒：time、年月日时：datehour、年月日时分：dateminute、年月日时分秒：datetime	string	'date'
max-date	可选的最大时间，如 2025-01-01	string	-
min-date	可选的最小时间，如 2024-01-01	string	-
format	用于格式化 change，cancel，confirm 事件中value的格式	string	-
toolbar-position	标题栏的位置,可选 top none	string	bottom
title	标题	string	-
confirm-button-text	确认按钮的文字，设置为空字符串可以隐藏	string	确定
cancel-button-text	取消按钮的文字，设置为空字符串可以隐藏	string|number	取消
font-size	选项的文字大小，	string	16px
option-height	每个选项的高度	string|number	50px
visible-option-num	可见选项的个数	number	5
close-on-click-overlay	是否在点击遮罩层后关闭	boolean	true
close-on-click-confirm	是否在点击确认按钮后关闭	boolean	true
close-on-click-cancel	是否在点击取消按钮后关闭	boolean	true
loading	是否为加载状态	boolean	false
safe-area-inset-bottom	是否开启底部安全区域	boolean	true
z-index	层级	number	10099
use-popup	是否使用 popup	boolean	true
filter	过滤函数	Function	-
formatter	格式化函数	Function	-
empty-text	空数据时的提示语	string	-
immediate-change	是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件仅微信小程序支持	boolean	true

Event

事件名	说明	回调参数
confirm	点击确认按钮时触发	(value:string, extend:DateTimePickerExtend)
cancel	点击取消按钮时触发	(value:string, extend:DateTimePickerExtend)
change	选项改变时触发	(value:string, extend:DateTimePickerExtend)

类型定义

类型

type DateTimePickerExtend = {
	year : number,
	month : number,
	day : number,
	hour : number,
	minute : number,
	second : number,
	timeStamp : number,
	value : string,
}

type DateTimePickerUnit = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'

type DateTimePickerFormatter = (type : DateTimePickerUnit, option : PickerOption) => PickerOption

type DateTimePickerFilter = (type : DateTimePickerUnit, options : PickerOption[]) => PickerOption[]

组件导出如下类型

import { DateTimePickerUnit, DateTimePickerFormatter, DateTimePickerFilter,DateTimePickerExtend } from '@/uni_modules/rice-ui';
//组件类型
const buttonRef=ref<RiceDateTimePickerComponentPublicInstance|null>(null)