Silver Formily Vant1.0.1

Appearance

Mobile Preview Open
Open mobile preview

TimePicker ​

TimePicker 是基于 TimePickerPanel 做的弹出层封装，大部分配置项可直接参考 TimePickerPanel。

基础用法 ​

vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { FormItem, TimePicker } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm({
  values: {
    currentTime: '12:00',
  },
})
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel">
      <Field
        name="currentTime"
        title="当前时间"
        :decorator="[FormItem, { isLink: true }]"
        :component="[TimePicker]"
      />
    </div>
  </FormProvider>
</template>

选项类型 ​

vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { FormItem, TimePicker } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm({
  values: {
    currentTime: '12:00:00',
  },
})
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel">
      <Field
        name="currentTime"
        title="选择时分秒"
        :decorator="[FormItem, { isLink: true }]"
        :component="[
          TimePicker,
          {
            columnsType: ['hour', 'minute', 'second'],
          },
        ]"
      />
    </div>
  </FormProvider>
</template>

时间范围 ​

vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { FormItem, TimePicker } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm({
  values: {
    currentTime: '12:35',
  },
})
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel">
      <Field
        name="currentTime"
        title="限制小时与分钟范围"
        :decorator="[FormItem, { isLink: true }]"
        :component="[
          TimePicker,
          {
            minHour: 10,
            maxHour: 20,
            minMinute: 30,
            maxMinute: 40,
          },
        ]"
      />
    </div>
  </FormProvider>
</template>

整体时间范围 ​

vue
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import { FormItem, TimePicker } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm({
  values: {
    currentTime: '12:00:00',
  },
})
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel">
      <Field
        name="currentTime"
        title="限制整体时间范围"
        :decorator="[FormItem, { isLink: true }]"
        :component="[
          TimePicker,
          {
            columnsType: ['hour', 'minute', 'second'],
            minTime: '09:40:10',
            maxTime: '20:20:50',
          },
        ]"
      />
    </div>
  </FormProvider>
</template>

格式化选项 ​

vue
<script setup lang="ts">
import type { PickerOption } from '@silver-formily/vant'
import { createForm } from '@silver-formily/core'
import { FormItem, TimePicker } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm({
  values: {
    currentTime: '12:00:00',
  },
})

function formatter(type: string, option: PickerOption) {
  if (type === 'hour') {
    option.text += '时'
  }
  if (type === 'minute') {
    option.text += '分'
  }
  if (type === 'second') {
    option.text += '秒'
  }

  return option
}
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel">
      <Field
        name="currentTime"
        title="格式化时间选项"
        :decorator="[FormItem, { isLink: true }]"
        :component="[
          TimePicker,
          {
            columnsType: ['hour', 'minute', 'second'],
            formatter,
          },
        ]"
      />
    </div>
  </FormProvider>
</template>

过滤选项 ​

vue
<script setup lang="ts">
import type { PickerOption } from '@silver-formily/vant'
import { createForm } from '@silver-formily/core'
import { FormItem, TimePicker } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm({
  values: {
    currentTime: '12:00',
  },
})

function filter(type: string, options: PickerOption[]) {
  if (type === 'minute') {
    return options.filter(option => Number(option.value) % 10 === 0)
  }

  return options
}
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel">
      <Field
        name="currentTime"
        title="按 10 分钟间隔选择"
        :decorator="[FormItem, { isLink: true }]"
        :component="[TimePicker, { filter }]"
      />
    </div>
  </FormProvider>
</template>

高级用法 ​

vue
<script setup lang="ts">
import type { PickerOption } from '@silver-formily/vant'
import { createForm } from '@silver-formily/core'
import { FormItem, TimePicker } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm({
  values: {
    currentTime: '08:40',
  },
})

function filter(type: string, options: PickerOption[], values: string[]) {
  const hour = Number(values[0])

  if (type === 'hour') {
    return options.filter((option) => {
      const value = Number(option.value)
      return value >= 8 && value <= 18
    })
  }

  if (type === 'minute') {
    const minuteOptions = options.filter(option => Number(option.value) % 10 === 0)

    if (hour === 8) {
      return minuteOptions.filter(option => Number(option.value) >= 40)
    }

    if (hour === 18) {
      return minuteOptions.filter(option => Number(option.value) <= 20)
    }

    return minuteOptions
  }

  return options
}
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel">
      <Field
        name="currentTime"
        title="营业时间段内选择"
        :decorator="[FormItem, { isLink: true }]"
        :component="[TimePicker, { filter }]"
      />
    </div>
  </FormProvider>
</template>

API ​

使用约定 ​

  • 内部会先按 value-format 解析字段值，再转换成 Vant TimePicker 需要的滚轮数组
  • 如果未显式传 value-format，会按 columnsType 推导默认格式，例如 ['hour', 'minute'] -> 'HH:mm'
  • 如果未显式传 format，字段展示会默认复用 value-format
  • minTime / maxTime 仍遵循官方格式，固定使用 HH:mm:ss
  • 触发区交互状态跟随 Field 的 disabled / readOnly / readPretty，不会透传到内部 TimePickerPanel。

补充 Props ​

属性名类型描述默认值
placeholderstring未选择时的展示文案'请选择时间'
popupPropsTimePickerPopupProps传给内部 Popup 的配置{}
displayFormatterFunction自定义字段展示区文案，优先级高于 format-

时间面板相关属性和插槽可以直接参考 TimePickerPanel，例如 modelValue、columnsType、format、valueFormat、minTime、maxTime 等。

参考createPopup

Events ​

事件名描述回调参数
update:modelValue点击确认后同步字段值Function
opened弹层打开且动画结束后触发-
closed弹层关闭且动画结束后触发-