Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

DatePicker ​

DatePicker 是对 antd-mobile DatePicker 的 Formily 适配，值为字符串（按 format 序列化），日期能力基于 dayjs。

提示

关于 DatePicker 组件的右侧箭头相关逻辑请参考 FormItem 中的箭头与清除按钮

基础使用 ​

tsx
import { DatePicker, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    birthday: '2020-01-01',
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function DatePickerBasic() {
  return (
    <FormProvider form={form}>
      <Field
        name="birthday"
        title="生日"
        decorator={[FormItem]}
        component={[DatePicker]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

精度控制 ​

picker 指定 year / month 精度，showTime 开启日期时间选择；format 会根据精度自动推导，也可以显式覆盖。

tsx
import { DatePicker, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    month: '2024-03',
    year: '2024',
    time: '2024-03-01 10:30:00',
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function DatePickerPrecision() {
  return (
    <FormProvider form={form}>
      <Field
        name="month"
        title="选择月份"
        decorator={[FormItem]}
        component={[DatePicker, { picker: 'month' }]}
      />
      <Field
        name="year"
        title="选择年份"
        decorator={[FormItem]}
        component={[DatePicker, { picker: 'year' }]}
      />
      <Field
        name="time"
        title="日期时间"
        decorator={[FormItem]}
        component={[DatePicker, { showTime: true }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

周与季度 ​

picker 额外支持 week（周）与 quarter（季度）精度，值格式自动匹配（如 2024-W09、2024-Q1）。周使用 ISO 周年与周数（GGGG-[W]WW），与选择器的周列保持一致。

tsx
import { DatePicker, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    week: '2024-W09',
    quarter: '2024-Q1',
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function DatePickerWeekQuarter() {
  return (
    <FormProvider form={form}>
      <Field
        name="week"
        title="选择周"
        decorator={[FormItem]}
        component={[DatePicker, { picker: 'week' }]}
      />
      <Field
        name="quarter"
        title="选择季度"
        decorator={[FormItem]}
        component={[DatePicker, { picker: 'quarter' }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

自定义展示 ​

displayRender(value, props) 自定义编辑态和阅读态的展示内容，返回 ReactNode，与其他 picker 保持一致。回调接收原始字段值，不影响提交值；format 继续控制日期序列化、解析及默认展示格式。

本例将日期展示为 2026/10/15，编辑态和阅读态使用同一个渲染函数。点击提交可查看仍为 YYYY-MM-DD 格式的字段值。

tsx
import type { IDatePickerProps } from '@silver-formily/antd-mobile'
import { DatePicker, FormButtonGroup, FormItem, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    editable: '2026-10-15',
    preview: '2026-10-15',
  },
})

const displayRender: IDatePickerProps['displayRender'] = (value) => {
  if (!value)
    return undefined
  const text = String(value ?? '').replaceAll('-', '/')
  return <span style={{ color: 'var(--adm-color-primary)' }}>{text}</span>
}

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function DatePickerDisplay() {
  return (
    <FormProvider form={form}>
      <Field
        name="editable"
        title="编辑态"
        decorator={[FormItem]}
        component={[DatePicker, { displayRender }]}
      />
      <Field
        name="preview"
        title="阅读态"
        pattern="readPretty"
        decorator={[FormItem]}
        component={[DatePicker, { displayRender }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={onSubmit}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

API ​

属性 ​

属性名类型描述默认值
pickerenum选择精度，week / quarter 为扩展精度'date'
formatstring | Function值的序列化格式，缺省时按精度自动推导-
displayRender(value: IDatePickerProps['value'], props: IDatePickerProps) => ReactNode自定义编辑态和阅读态展示，不影响提交值-
showTimeboolean是否包含时间选择false
placeholderstring占位提示文案-

其余配置参考 DatePicker 官方文档。