DatePicker 日期选择器

DatePicker 单独使用时，仅仅是一个弹出框。

DatePicker 作为 FormItem 的子元素时，会成为表单项，并使 FormItem 成为可点击状态。

示例

基础用法

<script lang="ts">
  let visible = $state<boolean[]>([false, false, false, false, false])
</script>

<Button onclick={() => (visible[0] = true)}>选择日期</Button>
<Button onclick={() => (visible[1] = true)}>选择时间</Button>
<DatePicker header="请选择" bind:visible={visible[0]} bind:value={form.date} />
<DatePicker header="请选择" bind:visible={visible[1]} precision="second" />

限制范围

<Button onclick={() => (visible[2] = true)}>限制范围</Button>
<Button onclick={() => (visible[3] = true)}>至今日</Button>
<DatePicker
  header="日期范围"
  bind:visible={visible[2]}
  min={new Date('2023-12-28')}
  max={new Date('2028-09-16')}
/>
<DatePicker header="至今日" bind:visible={visible[3]} max="tillNow" />

表单-水平布局

<script lang="ts">
  let form = $state<{ date?: Date }>({
    date: new Date(),
  })
</script>

<Form header="表单-水平布局" layout="horizontal">
  <FormItem label="出生日期" required>
    <DatePicker bind:value={form.date} clearable />
  </FormItem>
</Form>

表单-垂直布局+自定义显示

<Form header="表单-垂直布局+自定义显示" bind:data={form} layout="vertical">
  <FormItem label="出生日期" field="date" required>
    <DatePicker bind:value={form.date} header="出生日期" placeholder="年-月-日" clearable>
      {#snippet display(date?: Date)}
        <p>{date ? dayjs(date).format('YYYY年MM月DD日') : ''}</p>
      {/snippet}
    </DatePicker>
  </FormItem>
</Form>

只读

<Form header="只读" layout="horizontal">
  <FormItem label="出生日期">
    <DatePicker bind:value={form.date} readonly />
  </FormItem>
</Form>

禁用

<Form header="禁用" layout="vertical">
  <FormItem label="出生日期">
    <DatePicker bind:value={form.date} disabled />
  </FormItem>
</Form>

DatePicker

属性

属性	说明	类型	默认值
visible	弹出层是否打开	boolean	$bindable(false)
value	选中日期	Date	$bindable()
precision	日期精度	[DatePrecision](#date-precition-type)	'day'
max	最大值	Date | 'tillNow'	10 年后（整年）
min	最小值	Date	10 年前（整年）
header	标题	string | Snippet	undefined
clearable	是否显示清除按钮	boolean	false
noMask	不展示遮罩	boolean	false
keepOpenOnClickMask	阻止点击遮罩关闭	boolean	false

注：loader 函数可以返回 string 或 PickerItem 类型的数组。如果 loader 函数返回了 Promise，组件会执行异步加载。

类型定义

DatePrecision

/** 日期精度 */
export type DatePrecision =
  | 'year'
  | 'month'
  | 'day'
  | 'hour'
  | 'minute'
  | 'second'

配合 FormItem

当此组件作为 FormItem 组件的子元素时，以下属性生效。

属性	说明	类型	默认值
display	自定义内容显示	Snippet<[date: Date]>	undefined
placeholder	占位文本	string	'请选择'
readonly	是否只读	boolean	false
disabled	是否禁用	boolean	false

事件

事件	说明	类型
onChange	变更事件	(value: Date | undefined) => void
onCancel	取消事件	() => void