# DatePickerInput 日期选择输入 v1.2.6

日期选择组件用于表单中，与输入框同步弹出选择日期

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

提示

该组件在小程序中，因为层级问题，可能会被页面的pi-bottom-bar 布局覆盖，使用后请谨慎测试

# 示例

# 基础用法

可通过v-model | value：控制日期

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="name" label="基础用法">
      <pi-date-picker-input v-model="form.date" />
    </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { date: '2020-5-1' }
    }
  }
}
</script>

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

# 选择月份

可通过:date-picker: {field: 'month' }：控制选择月份

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="name" label="月">
      <pi-date-picker-input
        v-model="form.month"
        date-format="YYYY年MM月"
        :date-picker="{ field: 'month' }"
      />
    </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { month: '2020-3' }
    }
  }
}
</script>

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

# 只选择时间

可通过:date-picker: {field: 'minute', dateType: 'time' }：只选择时间

<template>
  <pi-form slot="body" label-width="180" :model="form" border error-type="toast">
    <pi-form-item required prop="name" label="只选时间">
      <pi-date-picker-input
        v-model="form.time"
        date-format="HH时mm分"
        :date-picker="{ field: 'minute', dateType: 'time' }"
      />
    </pi-form-item>
  </pi-form>
</template>

<script>
export default {
  data() {
    return {
      form: { time: '09:20' // 您也可以传入完整时间：2022-02-22 23:09:20 }
    }
  }
}
</script>

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

# API

# Props

名称	描述	类型	必选	默认值
value	日历组件默认值	—	`false`	-
customStyle	自定义样式，对象形式	`Object`	`false`	{}
customClass	自定义样式类，字符串形式	`String`	`false`	''
dateFormat	已选择的时间格式化显示规则	`String`	`true`	'YYYY-MM-DD'
parseValueFn	解析值的方法，如果配置了，则读取该函数的返回值作为显示的内容	`Function`	`false`	-
input	输入框的配置	`Object`	`false`	input配置项
datePicker	日历弹窗的配置	`Object`	`false`	datePicker配置项

# Input Props

提示

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

名称	描述	类型	必选	默认值
placeholder	-	`String`	`false`	'请选择'
disabled	-	`Boolean`	`false`	true

# Slots

名称	说明
default	默认插槽

# Events

方法名称	说明	参数
change	输入框值发生变化	value(String)

← CalendarInput 日历输入 SelectInput 选择输入 →