Silver Formily Vant1.0.1

Appearance

Mobile Preview Open
Open mobile preview

DatePicker ​

DatePicker 是基于 DatePickerPanel 做的弹出式封装。

基础使用 ​

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

const form = createForm({
  values: {
    appointmentDate: '2026-03-30',
  },
})

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

<template>
  <Form :form="form">
    <Field
      name="appointmentDate"
      title="预约日期"
      :decorator="[FormItem, { isLink: true }]"
      :component="[DatePicker, { minDate, maxDate }]"
    />

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

自定义列类型 ​

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

const form = createForm({
  values: {
    billingMonth: '2026-06',
  },
})
const minDate = '2025-01'
const maxDate = '2027-12'
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel">
      <Field
        name="billingMonth"
        title="账单月份"
        :decorator="[FormItem, { isLink: true }]"
        :component="[
          DatePicker,
          {
            columnsType: ['year', 'month'],
            minDate,
            maxDate,
          },
        ]"
      />
    </div>
  </FormProvider>
</template>

format 与 value-format ​

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

const form = createForm({
  values: {
    appointmentDate: '30/03/2026',
  },
})
const minDate = '01/01/2025'
const maxDate = '31/12/2027'

const currentValue = formilyComputed(() => {
  return form.values.appointmentDate as string | undefined
})

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

<template>
  <Form :form="form">
    <div class="demo-panel">
      <Field
        name="appointmentDate"
        title="按 DD/MM/YYYY 提交"
        :decorator="[FormItem, { isLink: true }]"
        :component="[
          DatePicker,
          {
            format: 'YYYY年MM月DD日',
            minDate,
            maxDate,
            valueFormat: 'DD/MM/YYYY',
          },
        ]"
      />

      <div class="demo-value">
        当前写回值：{{ currentValue || '暂无' }}
      </div>
    </div>

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

<style scoped>
.demo-panel {
  display: grid;
  gap: 12px;
}

.demo-value {
  padding: 0 16px;
  color: var(--van-text-color-2);
  font-size: 14px;
  line-height: 20px;
}
</style>

自定义弹出位置 ​

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

const form = createForm({
  values: {
    renewalDate: '2026-08-18',
  },
})
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel">
      <Field
        name="renewalDate"
        title="顶部弹出"
        :decorator="[FormItem, { isLink: true }]"
        :component="[
          DatePicker,
          {
            minDate,
            maxDate,
            popupProps: {
              position: 'top',
            },
          },
        ]"
      />
    </div>
  </FormProvider>
</template>

API ​

使用约定 ​

  • 如果未显式传 format，字段展示会默认复用 value-format
  • 触发区交互状态跟随 Field 的 disabled / readOnly / readPretty，不会透传到内部 DatePickerPanel。

其余使用约定请参考DatePickerPanel使用约定

封装补充 Props ​

属性名类型描述默认值
modelValuestring | null当前字段值-
formatstring字段展示格式与 value-format 一致
valueFormatstring字段值格式，对应模板里的 value-formatYYYY-MM-DD
placeholderstring未选择时的展示文案'请选择日期'
popupPropsPopup Props传给内部 Popup 的配置-
displayFormatterFunction自定义字段展示区文案，优先级高于 format-

其余配置项可参考DatePickerPanel

参考createPopup

Events ​

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