FxDatePicker 日期选择器

日期选择器用于日期输入。

FxDatePicker 属于 @fx/components。

输入日期

按「日」选择的基础日期选择器。测量维度由 type 属性决定，可通过 shortcuts 启用快捷选项，通过 disabled-date 设置禁用日期。

<template>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">默认</span>
      <FxDatePicker v-model="value1" type="date" placeholder="选择日期" />
    </div>
    <div class="block">
      <span class="demonstration">带快捷选项与禁用日期</span>
      <FxDatePicker
        v-model="value2"
        type="date"
        placeholder="选择日期"
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value1 = ref("")
const value2 = ref("")

const shortcuts = [
  { text: "今天", value: new Date() },
  {
    text: "昨天",
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: "一周前",
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time: Date) => time.getTime() > Date.now()
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.demonstration {
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
</style>

其他测量维度

通过扩展标准日期选择器，可以选择周、月、年或多个日期。

<template>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">周</span>
      <FxDatePicker
        v-model="value1"
        type="week"
        format="[第] ww [周]"
        placeholder="选择周"
      />
    </div>
    <div class="block">
      <span class="demonstration">多日</span>
      <FxDatePicker
        v-model="value2"
        type="dates"
        placeholder="选择一个或多个日期"
      />
    </div>
    <div class="block">
      <span class="demonstration">年</span>
      <FxDatePicker v-model="value3" type="year" placeholder="选择年" />
    </div>
    <div class="block">
      <span class="demonstration">多年</span>
      <FxDatePicker v-model="value4" type="years" placeholder="选择一个或多个年" />
    </div>
    <div class="block">
      <span class="demonstration">月</span>
      <FxDatePicker v-model="value5" type="month" placeholder="选择月" />
    </div>
    <div class="block">
      <span class="demonstration">多月</span>
      <FxDatePicker v-model="value6" type="months" placeholder="选择一个或多月" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value1 = ref("")
const value2 = ref("")
const value3 = ref("")
const value4 = ref("")
const value5 = ref("")
const value6 = ref("")
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.demonstration {
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
</style>

日期范围

支持选择日期范围。范围模式下左右两面板默认联动，如需两面板独立切换月份，可使用 unlink-panels 属性。

<template>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">默认</span>
      <FxDatePicker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </div>
    <div class="block">
      <span class="demonstration">带快捷选项与面板独立</span>
      <FxDatePicker
        v-model="value2"
        type="daterange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :shortcuts="shortcuts"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value1 = ref("")
const value2 = ref("")

const shortcuts = [
  {
    text: "上周",
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: "上个月",
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: "最近三个月",
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.demonstration {
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
</style>

月份范围

支持选择月份范围。范围模式下左右两面板默认联动，如需两面板独立切换年份，可使用 unlink-panels 属性。

<template>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">默认</span>
      <FxDatePicker
        v-model="value1"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
      />
    </div>
    <div class="block">
      <span class="demonstration">带快捷选项</span>
      <FxDatePicker
        v-model="value2"
        type="monthrange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        :shortcuts="shortcuts"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value1 = ref("")
const value2 = ref("")

const shortcuts = [
  { text: "本月", value: [new Date(), new Date()] },
  {
    text: "今年至今",
    value: () => {
      const end = new Date()
      const start = new Date(new Date().getFullYear(), 0)
      return [start, end]
    },
  },
  {
    text: "最近六个月",
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 6)
      return [start, end]
    },
  },
]
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.demonstration {
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
</style>

年份范围

支持选择年份范围。范围模式下左右两面板默认联动，如需两面板独立切换年份，可使用 unlink-panels 属性。

<template>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">默认</span>
      <FxDatePicker
        v-model="value1"
        type="yearrange"
        range-separator="至"
        start-placeholder="开始年份"
        end-placeholder="结束年份"
      />
    </div>
    <div class="block">
      <span class="demonstration">带快捷选项</span>
      <FxDatePicker
        v-model="value2"
        type="yearrange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始年份"
        end-placeholder="结束年份"
        :shortcuts="shortcuts"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value1 = ref()
const value2 = ref()

const shortcuts = [
  { text: "今年", value: [new Date(), new Date()] },
  {
    text: "最近 10 年",
    value: () => {
      const end = new Date()
      const start = new Date(
        new Date().setFullYear(new Date().getFullYear() - 10),
      )
      return [start, end]
    },
  },
  {
    text: "未来 50 年",
    value: () => {
      const start = new Date()
      const end = new Date(
        new Date().setFullYear(new Date().getFullYear() + 50),
      )
      return [start, end]
    },
  },
]
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.demonstration {
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
</style>

单面板

默认情况下日期范围选择器有两个面板。如需单面板，设置 single-panel 属性。

<template>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">日期范围</span>
      <FxDatePicker v-model="value1" type="daterange" single-panel />
    </div>
    <div class="block">
      <span class="demonstration">月份范围</span>
      <FxDatePicker v-model="value2" type="monthrange" single-panel />
    </div>
    <div class="block">
      <span class="demonstration">年份范围</span>
      <FxDatePicker v-model="value3" type="yearrange" single-panel />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value1 = ref()
const value2 = ref()
const value3 = ref()
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.demonstration {
  font-size: 14px;
  color: var(--fx-text-color-secondary);
  width: 100%;
  text-align: center;
}
</style>

默认值

若用户未选择日期，默认展示今天的日历。可通过 default-value 设置其他日期，其值应能被 new Date() 解析。type 为 daterange 时，default-value 设置左侧日历。

<template>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">date</span>
      <FxDatePicker
        v-model="value1"
        type="date"
        placeholder="选择日期"
        :default-value="new Date(2010, 9, 1)"
      />
    </div>
    <div class="block">
      <span class="demonstration">daterange</span>
      <FxDatePicker
        v-model="value2"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value1 = ref("")
const value2 = ref("")
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.demonstration {
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
</style>

日期格式

用 format 控制输入框显示文本的格式；用 value-format 控制绑定值的格式。默认情况下，组件接受并发射 Date 对象。

WARNING

注意大小写

<template>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration"> emits Date 对象</span>
      <span class="demonstration">值：{{ value1 }}</span>
      <FxDatePicker
        v-model="value1"
        type="date"
        placeholder="选择日期"
        format="YYYY/MM/DD"
      />
    </div>
    <div class="block">
      <span class="demonstration">使用 value-format</span>
      <span class="demonstration">值：{{ value2 }}</span>
      <FxDatePicker
        v-model="value2"
        type="date"
        placeholder="选择日期"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
    </div>
    <div class="block">
      <span class="demonstration">时间戳</span>
      <span class="demonstration">值：{{ value3 }}</span>
      <FxDatePicker
        v-model="value3"
        type="date"
        placeholder="选择日期"
        format="YYYY/MM/DD"
        value-format="x"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value1 = ref("")
const value2 = ref("")
const value3 = ref("")
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.demonstration {
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
</style>

起止日期的默认时间

选择日期范围时，可为起止日期分别指定时间部分。默认起止日期的时间部分均为 00:00:00，设置 default-time 可分别改变，接受最多两个 Date 对象的数组。

<template>
  <div class="demo-date-picker">
    <div class="block">
      <p class="demonstration">组件值：{{ value }}</p>
      <FxDatePicker
        v-model="value"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD HH:mm:ss"
        :default-time="defaultTime"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value = ref("")
const defaultTime: [Date, Date] = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
]
</script>

<style scoped>
.demo-date-picker .block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.demonstration {
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
</style>

自定义前缀内容

可自定义前缀内容。将 prefix-icon 设置为从其他 .vue 引入的组件，或由 render 函数生成。

<template>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">设置 prefix-icon</span>
      <FxDatePicker
        v-model="value"
        type="date"
        placeholder="选择日期"
        :prefix-icon="customPrefix"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { h, ref, shallowRef } from "vue"

const value = ref("")

const customPrefix = shallowRef({
  render() {
    return h("p", "pre")
  },
})
</script>

<style scoped>
.demo-date-picker .block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.demonstration {
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
</style>

自定义内容

可自定义单元格内容，作用域插槽中可获取单元格数据。注意自定义内容结构应与默认结构一致，否则可能出现样式错位。

<template>
  <div class="demo-date-picker">
    <FxDatePicker
      v-model="value"
      type="date"
      placeholder="选择日期"
      format="YYYY/MM/DD"
      value-format="YYYY-MM-DD"
    >
      <template #default="cell">
        <div class="cell" :class="{ current: cell.isCurrent }">
          <span class="text">{{ cell.text }}</span>
          <span v-if="isHoliday(cell)" class="holiday" />
        </div>
      </template>
    </FxDatePicker>
    <FxDatePicker v-model="month" type="month" placeholder="选择月">
      <template #default="cell">
        <div class="cell" :class="{ current: cell.isCurrent }">
          <span class="text">{{ cell.text + 1 }}期</span>
        </div>
      </template>
    </FxDatePicker>
    <FxDatePicker v-model="year" type="year" placeholder="选择年">
      <template #default="cell">
        <div class="cell" :class="{ current: cell.isCurrent }">
          <span class="text">{{ cell.text + 1 }}y</span>
        </div>
      </template>
    </FxDatePicker>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value = ref("2021-10-29")
const month = ref("")
const year = ref("")

const holidays = [
  "2021-10-01",
  "2021-10-02",
  "2021-10-03",
  "2021-10-04",
  "2021-10-05",
  "2021-10-06",
  "2021-10-07",
]

const isHoliday = ({ dayjs }: { dayjs: { format: (f: string) => string } }) =>
  holidays.includes(dayjs.format("YYYY-MM-DD"))
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;
  position: relative;
}

.cell .text {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
  line-height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

.cell.current .text {
  background: var(--fx-color-primary);
  color: #fff;
}

.cell .holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--fx-color-danger);
  border-radius: 50%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
</style>

自定义图标

通过插槽可使用自定义图标。

<template>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">自定义导航图标</span>
      <FxDatePicker
        v-model="value"
        type="date"
        placeholder="选择日期"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      >
        <template #prev-month>
          <svg class="nav-icon" viewBox="0 0 24 24" fill="none">
            <path
              d="M15 18l-6-6 6-6"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </template>
        <template #next-month>
          <svg class="nav-icon" viewBox="0 0 24 24" fill="none">
            <path
              d="M9 18l6-6-6-6"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </template>
        <template #prev-year>
          <svg class="nav-icon" viewBox="0 0 24 24" fill="none">
            <path
              d="M18 18l-6-6 6-6M11 18l-6-6 6-6"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </template>
        <template #next-year>
          <svg class="nav-icon" viewBox="0 0 24 24" fill="none">
            <path
              d="M6 18l6-6-6-6M13 18l6-6-6-6"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </template>
      </FxDatePicker>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value = ref("")
</script>

<style scoped>
.demo-date-picker .block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.demonstration {
  font-size: 14px;
  color: var(--fx-text-color-secondary);
}
.nav-icon {
  width: 1em;
  height: 1em;
}
</style>

扩展能力

以下为 FxDatePicker 在基础日期选择之外额外提供的能力。

尺寸

size 支持 large / default / small。

<template>
  <div class="demo-row">
    <FxDatePicker v-model="value1" size="large" placeholder="large" />
    <FxDatePicker v-model="value2" placeholder="default" />
    <FxDatePicker v-model="value3" size="small" placeholder="small" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value1 = ref()
const value2 = ref()
const value3 = ref()
</script>

<style scoped>
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
</style>

快捷选项

shortcuts 数组每一项含 { text, value }，value 可为 Date 或 () => Date（范围面板则为 [Date, Date] 或 () => [Date, Date]）。

<template>
  <FxDatePicker
    v-model="value"
    type="date"
    placeholder="选择日期"
    :shortcuts="shortcuts"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value = ref()

const shortcuts = [
  { text: "今天", value: new Date() },
  {
    text: "昨天",
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 1)
      return date
    },
  },
  {
    text: "一周前",
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 7)
      return date
    },
  },
  {
    text: "一个月前",
    value: () => {
      const date = new Date()
      date.setMonth(date.getMonth() - 1)
      return date
    },
  },
]
</script>

禁用日期

disabled-date 接收 (date: Date) => boolean，返回 true 表示禁用。下例禁用周末。

<template>
  <FxDatePicker
    v-model="value"
    type="date"
    placeholder="仅可选择工作日"
    :disabled-date="disabledDate"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value = ref()

const disabledDate = (time: Date) => {
  const day = time.getDay()
  return day === 0 || day === 6
}
</script>

周选择

type="week" + show-week-number 可显示周数；可通过 format 自定义显示格式。

<template>
  <div class="demo-row">
    <FxDatePicker
      v-model="value1"
      type="week"
      show-week-number
      placeholder="选择周"
    />
    <FxDatePicker
      v-model="value2"
      type="week"
      format="YYYY 第 WW 周"
      placeholder="自定义显示格式"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const value1 = ref()
const value2 = ref()
</script>

<style scoped>
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
</style>

本地化

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

API

Attributes

属性	说明	类型	默认值
model-value / v-model	绑定值，range 时数组长度为 2	number | string | Date | array	—
readonly	是否只读	boolean	false
disabled	是否禁用	boolean	false
size	输入框尺寸	'' | 'large' | 'default' | 'small'	—
editable	输入框是否可键入	boolean	true
clearable	是否显示清空按钮	boolean	true
placeholder	非范围模式的占位	string	—
start-placeholder	范围模式起始占位	string	—
end-placeholder	范围模式结束占位	string	—
type	选择器类型	'year' | 'years' | 'month' | 'months' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange' | 'yearrange'	date
format	输入框显示格式	string	YYYY-MM-DD
popper-class	下拉自定义类名	string	—
popper-style	下拉自定义样式	string | object	—
popper-options	透传浮层选项	object	{}
range-separator	范围分隔符	string	'-'
default-value	默认聚焦日期	Date | [Date, Date]	—
default-time	选日期范围时使用的时间	Date | [Date, Date]	—
value-format	绑定值格式，未指定则绑定 Date 对象	string	—
id	原生 id	string | [string, string]	—
name	原生 name	string | [string, string]	—
unlink-panels	范围模式两面板独立翻月	boolean	false
single-panel	范围模式仅展示一面板	boolean	false
prefix-icon	自定义前缀图标	string | Component	ep:calendar / ep:clock
clear-icon	自定义清空图标	string | Component	ep:circle-close
validate-event	是否触发表单校验	boolean	true
disabled-date	禁用日期判定函数，返回 Boolean	(date: Date) => boolean	—
shortcuts	快捷选项数组	Array<{ text: string; value: Date | Function }>	[]
cell-class-name	单元格自定义类	(date: Date) => string	—
teleported	是否将下拉挂载到 body	boolean	true
empty-values	组件的空值列表	array	—
value-on-clear	清空时回填的值	string | number | boolean | Function	—
fallback-placements	浮层备选位置列表	Placement[]	['bottom','top','right','left']
placement	浮层位置	Placement	bottom
show-footer	是否显示底部按钮区	boolean	true
show-confirm	是否显示确认按钮	boolean	true
show-week-number	是否显示周数	boolean	false
automatic-dropdown	聚焦输入框时自动展开面板	boolean	true
date-format	面板内日期显示格式	string	YYYY-MM-DD
time-format	面板内时间显示格式	string	HH:mm:ss
disabled-hours	禁用小时（仅 datetime* 生效）	(role: string, comparingDate?: Dayjs) => number[]	—
disabled-minutes	禁用分钟（仅 datetime* 生效）	(hour: number, role: string, comparingDate?: Dayjs) => number[]	—
disabled-seconds	禁用秒（仅 datetime* 生效）	(hour: number, minute: number, role: string, comparingDate?: Dayjs) => number[]	—
show-now	是否显示「此刻」按钮（仅 datetime*）	boolean	true
arrow-control	时间面板是否用箭头选择	boolean	false
save-on-blur	失焦时是否保存当前时间值	boolean	true
tabindex	输入框 tabindex	string | number	0
aria-label	a11y 标签	string	—

Events

事件名	说明	类型
change	用户确认选值或点击外部时触发	(val) => void
blur	输入框失焦时触发	(e: FocusEvent) => void
focus	输入框聚焦时触发	(e: FocusEvent) => void
clear	点击清空按钮时触发	() => void
calendar-change	面板日期交互时触发，仅 range	(val: [Date, null | Date]) => void
panel-change	点击导航按钮时触发	(date: Date | [Date, Date], mode: 'month' | 'year', view?: string) => void
visible-change	下拉显隐时触发	(visible: boolean) => void

Slots

插槽名	说明
default	自定义单元格内容
range-separator	自定义范围分隔内容
prev-month	上月导航图标
next-month	下月导航图标
prev-year	上年导航图标
next-year	下年导航图标
prefix	自定义前缀内容（替代 prefix-icon）

Exposes

方法	说明	类型
focus	聚焦输入框	() => void
blur	失焦输入框	() => void
handleOpen	打开下拉	() => void
handleClose	关闭下拉	() => void

类型声明

展开查看

type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'