CalendarPicker 日历选择器

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

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

示例

基础用法

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

  let form = $state<{ date?: Date; range?: [begin?: Date, end?: Date] }>({
    date: new Date(),
    range: [],
  })
</script>

<Button onclick={() => (visible[0] = true)}>选择日期</Button>
<Button onclick={() => (visible[1] = true)}>选择范围</Button>
<CalendarPicker
  header="请选择"
  bind:visible={visible[0]}
  bind:value={form.date}
  clearable
/>
<CalendarPicker
  bind:visible={visible[1]}
  bind:value={form.range}
  mode="range"
  clearable
/>

限制范围

<Button onclick={() => (visible[2] = true)}>限制范围</Button>
<CalendarPicker
  header="请选择"
  bind:visible={visible[2]}
  bind:value={form.date}
  min={dayjs().add(-1, 'year').toDate()}
  max={dayjs().add(1, 'year').toDate()}
  clearable
/>

表单-水平布局

<Form header="表单-水平布局" bind:data={form} layout="horizontal">
  <FormItem label="出生日期" field="date" required>
    <CalendarPicker header="请选择" bind:value={form.date} clearable />
  </FormItem>
  <FormItem label="日期范围" field="range" required>
    <CalendarPicker
      header="请选择"
      bind:value={form.range}
      mode="range"
      clearable
    />
  </FormItem>
</Form>

表单-垂直布局

<Form header="表单-垂直布局" bind:data={form} layout="vertical">
  <FormItem label="出生日期" field="date" required>
    <CalendarPicker header="请选择" bind:value={form.date} clearable />
  </FormItem>
  <FormItem label="日期范围" field="range" required>
    <CalendarPicker
      header="请选择"
      bind:value={form.range}
      mode="range"
      clearable
    />
  </FormItem>
</Form>

只读

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

禁用

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

CalendarPicker

属性

属性	说明	类型	默认值
visible	是否显示	boolean	$bindable(false)
value	选中的日期	[CalendarValue](#calendar-value-type)	$bindable()
mode	选择模式	'single' | 'range'	'single'
max	最大值	Date	undefined
min	最小值	Date	undefined
weekStartsOn	每周以周几作为第一天	'sunday' | 'monday'	'sunday'
header	自定义头部	string | Snippet	undefined
calendarHeader	自定义 Calendar 头部	[CalendarHeader](#calendar-header-type)	undefined
cell	自定义日期单元格	Snippet<[date: Date]>	undefined
clearable	是否显示清除按钮	boolean	false
noMask	不展示遮罩	boolean	false
keepOpenOnClickMask	阻止点击遮罩关闭	boolean	false

类型定义

CalendarValue

/** mode = 'single' */
type CalendarSingleValue = Date | undefined
/** mode = 'range' */
type CalendarRangeValue = [begin?: Date, end?: Date]
/** CalendarValue */
type CalendarValue = CalendarSingleValue | CalendarRangeValue

CalendarHeader

// CalendarHeader
Snippet<
  [
    /** 年 */
    year: number,
    /** 月 */
    month: number,
    /** 增加 */
    add: (value: number, unit: 'year' | 'month') => void,
    /** 判定按钮是否禁用 */
    isDisabled: (
      button: 'prev-year' | 'prev-month' | 'next-month' | 'next-year'
    ) => boolean,
  ]
>

配合 FormItem

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

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

事件

事件	说明	类型
onChange	变更事件	(value: [CalendarValue](#calendar-value-type)) => void
onCancel	取消事件	() => void