FxDatePickerPanel 日期面板选择器

FxDatePickerPanel 是 FxDatePicker 的核心组件。

FxDatePickerPanel 属于 @fx/components。

输入日期

按「日」选择的基础日期面板。

<template>
  <div class="flex justify-center">
    <FxDatePickerPanel v-model="value" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { FxDatePickerPanel } from "@fx/components"

const value = ref()
</script>

边框

默认情况下 FxDatePickerPanel 带边框，某些场景下不需要边框。例如 FxDatePicker 不继承 border。

<template>
  <div>
    <div class="text-center">无边框：</div>
    <FxDivider />
    <div class="flex flex-wrap gap-4 justify-center items-center">
      <div class="p-5">
        <FxDatePickerPanel v-model="value" :border="false" />
      </div>
      <FxDivider direction="vertical" />
      <FxCard>
        <FxDatePickerPanel v-model="value" :border="false" />
      </FxCard>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { FxDatePickerPanel, FxDivider, FxCard } from "@fx/components"

const value = ref()
</script>

禁用

disabled 属性决定日期面板是否完全禁用。

<template>
  <div class="flex flex-col items-center gap-4">
    <FxSwitch v-model="disabled" active-text="禁用" inactive-text="启用" />
    <FxDatePickerPanel v-model="value" :disabled="disabled" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { FxDatePickerPanel, FxSwitch } from "@fx/components"

const value = ref()
const disabled = ref(true)
</script>

类型

测量维度由 type 属性决定。

<template>
  <div>
    <div class="flex gap-4">
      <div class="flex flex-col basis-[150px] gap-1">
        <span>Type:</span>
        <FxSelect v-model="type">
          <FxOption
            v-for="optionType in types"
            :key="optionType"
            :value="optionType"
            :label="optionType"
          />
        </FxSelect>
      </div>
    </div>
    <FxDivider />
    <div class="flex justify-center">
      <FxDatePickerPanel v-model="date" :type="type" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue"
import {
  FxDatePickerPanel,
  FxSelect,
  FxOption,
  FxDivider,
} from "@fx/components"
import type { DatePickerType } from "@fx/components"

const date = ref()
const type = ref<DatePickerType>("date")

watch(type, () => {
  date.value = undefined
})

const types: DatePickerType[] = [
  "year",
  "years",
  "month",
  "months",
  "date",
  "dates",
  "week",
  "datetime",
  "datetimerange",
  "daterange",
  "monthrange",
  "yearrange",
]
</script>

扩展能力

FxDatePickerPanel 在基础面板能力之上，还支持「此刻」按钮（show-now）、箭头选择时间（arrow-control）与时间禁用（disabled-hours / disabled-minutes / disabled-seconds），适用于 datetime / datetimerange 等含时间的类型，详见下方 API。

本地化

默认为中文，i18n 切换能力规划中。

API

Attributes

属性	说明	类型	默认值
model-value / v-model	绑定值，range 时长度为 2	number | string | Date | array	—
border	是否带边框	boolean	true
disabled	是否禁用	boolean	false
clearable	是否显示清空按钮	boolean	true
editable	输入框是否可键入	boolean	true
type	选择器类型	'year' | 'years' | 'month' | 'months' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange' | 'yearrange'	date
default-value	默认聚焦日期	Date | [Date, Date]	—
default-time	选日期时使用的时间	Date | [Date, Date]	—
value-format	绑定值格式，未指定则绑定 Date 对象	string	—
date-format	面板内日期显示格式	string	YYYY-MM-DD
time-format	面板内时间显示格式	string	HH:mm:ss
unlink-panels	范围内两面板独立翻月	boolean	false
single-panel	范围选择仅展示一面板	boolean	false
disabled-date	禁用日期判定函数	(date: Date) => boolean	—
shortcuts	快捷选项	Array<{ text: string; value: Date | Function }>	[]
cell-class-name	单元格自定义类	(date: Date) => string	—
show-footer	是否显示底部按钮区（仅 dates/months/years/datetime/datetimerange）	boolean	false
show-confirm	是否显示确认按钮	boolean	false
show-week-number	是否显示周数	boolean	false
show-now	是否显示「此刻」按钮	boolean	true
arrow-control	时间面板是否用箭头选择	boolean	false
disabled-hours	禁用小时	(role: string, comparingDate?: Dayjs) => number[]	—
disabled-minutes	禁用分钟	(hour: number, role: string, comparingDate?: Dayjs) => number[]	—
disabled-seconds	禁用秒	(hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[]	—

Events

事件名	说明	类型
calendar-change	面板日期交互时触发，仅 range	(val: [Date, null | Date]) => void
panel-change	点击导航按钮时触发	(date: Date | [Date, Date], mode: 'month' | 'year', view?: string) => void
clear	点击清空按钮时触发	() => void

Slots

插槽名	说明
default	自定义单元格内容
prev-month	上月导航图标
next-month	下月导航图标
prev-year	上年导航图标
next-year	下年导航图标