TimePickerPanel

TimePickerPanel 为了统一封装风格而独立的组件，大部分情况下应该配合 PickerGroup 使用，独立的弹出式封装请参考 TimePicker。

提示

TimePickerPanel 不包含触发输入框和 Popup；滚轮变化只维护临时选择，点击确认后才会写回字段值。
为方便业务开发，组件内部使用了 dayjs 对事件进行了格式化，现在组件的绑定值不再是数组，而是经过解析的字符串。

基础使用

vue

<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { Form, FormButtonGroup, Submit, TimePickerPanel } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    appointmentTime: '09:30',
  },
})

async function handleSubmit(values: typeof form.values) {
  await showDemoResult(values)
}
</script>

<template>
  <Form :form="form">
    <Field
      name="appointmentTime"
      :component="[TimePickerPanel, { minTime: '09:00:00', maxTime: '21:30:30' }]"
    />

    <FormButtonGroup>
      <Submit @submit="handleSubmit">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

API

使用约定

内部会先按 value-format 解析字段值，再转换成 Vant TimePicker 需要的滚轮数组
如果未显式传 value-format，会按 columnsType 推导默认格式，例如 ['hour', 'minute'] -> 'HH:mm'
readonly / disabled 会让内部滚轮进入只读态

Props

属性名	类型	描述	默认值
`modelValue`	`string \| null`	当前字段值	`-`
`columnsType`	`string[]`	选项类型，可选 `hour`、`minute`、`second`	`['hour', 'minute']`
`format`	`string`	展示格式，主要用于解析展示相关配置	与字段值一致
`valueFormat`	`string`	字段值格式，对应模板里的 `value-format`	`HH:mm`
`minTime`	`string`	可选最小时间，格式为 `HH:mm:ss`	`-`
`maxTime`	`string`	可选最大时间，格式为 `HH:mm:ss`	`-`
`readonly`	`boolean`	只读态	`false`
`disabled`	`boolean`	禁用态	`false`
`showToolbar`	`boolean`	是否显示顶部工具栏	`true`

除上述补充能力外，其他属性和插槽均可参考Vant TimePicker 官方文档。

Events

事件名	描述	回调参数
`update:modelValue`	点击确认后同步字段值	`Function`
`confirm`	点击确认后触发	`Function`
`cancel`	点击取消后触发	`-`

TimePickerPanel ​

基础使用 ​

API ​

使用约定 ​

Props ​

Events ​

TimePickerPanel

基础使用

API

使用约定

Props

Events