# DatePicker 时间选择器

日期选择组件，支持日期、年月、时分等维度。

# 基础用法

v-model 控制选择器收起/显示

field 控制选择器的粒度（年/月/日/时/分）

default-value 设置选择器的初始默认值

# 切换选择精度

  <pi-date-picker
      v-model="datePickerOptions.show"
      field="year"
      :show-title="false"
      default-value="2020"
      border-radius="24rpx 24rpx 0 0"
      append-to-body
  />
  <pi-date-picker
      v-model="datePickerOptions.show"
      field="month"
      :show-title="false"
      default-value="2020-05"
      border-radius="24rpx 24rpx 0 0"
      append-to-body
  />
  <pi-date-picker
      v-model="datePickerOptions.show"
      field="day"
      :show-title="false"
      default-value="2020-05-23"
      border-radius="24rpx 24rpx 0 0"
      append-to-body
  />
  <pi-date-picker
      v-model="datePickerOptions.show"
      field="hour"
      :show-title="false"
      default-value="2020-05-23 0"
      border-radius="24rpx 24rpx 0 0"
      append-to-body
  />
  <pi-date-picker
      v-model="datePickerOptions.show"
      field="minute"
      :show-title="false"
      default-value="2020-05-23 12:10"
      border-radius="24rpx 24rpx 0 0"
      append-to-body
  />
  <pi-date-picker
      v-model="datePickerOptions.show"
      field="second"
      :show-title="false"
      default-value="1990-05-23 12:10:25"
      border-radius="24rpx 24rpx 0 0"
      append-to-body
  />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# 切换操作栏位置

<pi-date-picker
    v-model="datePickerOptions.show"
    field="year"
    :show-title="false"
    default-value="2020"
    border-radius="24rpx 24rpx 0 0"
    append-to-body
/>
<pi-date-picker
    v-model="datePickerOptions.show"
    field="year"
    toolbar-position="top"
    :show-title="false"
    default-value="2020"
    border-radius="24rpx 24rpx 0 0"
    append-to-body
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# API

# Props

名称	描述	类型	必选	默认值
value	是否显示弹窗	—	`false`	-
customStyle	自定义样式	`Object`	`false`	-
customClass	自定义样式类	`String`	`false`	-
startYear	开始年份	`String \| Number`	`false`	-
endYear	结束年份	`String \| Number`	`false`	-
field	选择器的粒度	`'year'` `'month'` `'day'` `'hour'` `'minute'` `'second'`	`false`	'day'
defaultValue	日期默认值	`Number \| String \| Date`	`false`	''
format	返回的日期格式	`String`	`false`	'YYYY-MM-DD'
itemHeight	行高	`String \| Number`	`false`	110
itemStyle	行样式	`Object`	`false`	-
showItemBottomBorder	是否显示item下边框	`Boolean`	`false`	true
popupSelect	弹窗的配置	`Object`	`false`	popupSelect配置项
popup	弹窗的配置	`Object`	`false`	popup配置项
confirmBtn	弹窗的配置	`Object`	`false`	confirmBtn配置项
cancelBtn	弹窗的配置	`Object`	`false`	cancelBtn配置项

# ConfirmBtn Props

提示

以下属性覆盖pi-button配置，其余属性参考button配置项

名称	描述	类型	必选	默认值
show	是否显示确认按钮	`Boolean`	`false`	true
text	确认文案	`String`	`false`	'确认'
width	确认按钮宽度	`String \| Number`	`false`	100%
type	确认按钮预置样式	`'default'` `'primary'` `'warn'` `'secondary'` `'line'`	`false`	'primary'

# CancelBtn Props

提示

以下属性覆盖pi-button配置，其余属性参考button配置项

名称	描述	类型	必选	默认值
show	是否显示取消按钮	`Boolean`	`false`	false
text	取消文案	`String`	`false`	'取消'
width	取消按钮宽度	`String \| Number`	`false`	100%
type	取消按钮预置样式	`'default'` `'primary'` `'warn'` `'secondary'` `'line'`	`false`	'secondary'

# Events

事件名	描述	参数
close	关闭	-
confirm	提交	-

# Slots

名称	描述	插槽内容
title	标题	-
header	顶部区域	-
footer	底部区域	-

# Methods

Method	Description	Parameters
handleCancel	取消选择	-
handleConfirm	确认选择	-

← Picker 选择器 Select 选择器 →