DatePicker 日期选择器

用于选择或输入日期。

基本用法

无默认值

有默认值（非受控）

有固定值（受控）

一般用法

v-model 用法

<template>
  <h4>无默认值</h4>
  <i-date-picker />
  <h4>有默认值（非受控）</h4>
  <i-date-picker :defaultValue="currentValue" />
  <h4>有固定值（受控）</h4>
  <i-date-picker :modelValue="currentValue" />
  <h4>一般用法</h4>
  <i-date-picker :modelValue="currentValue" @change="handleChange" />
  <h4>v-model 用法</h4>
  <i-date-picker v-model="currentValue" />
</template>

<script setup>
import { ref } from 'vue'

const currentValue = ref('2022-05-20')

const handleChange = (val) => {
  console.log(val)
  currentValue.value = val
}
</script>

显示代码复制代码复制代码

日期范围选择器

可通过 type 属性指定为日期范围选择器。

无默认值

有默认值（非受控）

有固定值（受控）

一般用法

v-model 用法

<template>
  <h4>无默认值</h4>
  <i-date-picker type="range" />
  <h4>有默认值（非受控）</h4>
  <i-date-picker type="range" :defaultValue="currentValue" />
  <h4>有固定值（受控）</h4>
  <i-date-picker type="range" :modelValue="currentValue" />
  <h4>一般用法</h4>
  <i-date-picker
    type="range"
    :modelValue="currentValue"
    @change="handleChange"
  />
  <h4>v-model 用法</h4>
  <i-date-picker type="range" v-model="currentValue" />
</template>

<script setup>
import { ref } from 'vue'

const currentValue = ref(['2022-05-20', '2022-11-11'])

const handleChange = (val) => {
  console.log(val)
  currentValue.value = val
}
</script>

显示代码复制代码复制代码

禁用状态

可通过 disabled 属性控制为禁用状态。

<template>
  <i-date-picker disabled />
</template>

显示代码复制代码复制代码

不同触发方式

可通过 trigger 属性指定下拉菜单触发方式，默认为 click。

<template>
  <div class="idesign-demo-block-row">
    <i-date-picker trigger="click" />
    <i-date-picker trigger="hover" />
    <i-date-picker trigger="context-menu" />
  </div>
</template>

显示代码复制代码复制代码

每周的第一天

可通过 firstDayOfWeek 属性设置每周的第一天，0 为周日，1 为周一。

<template>
  <div className="idesign-demo-block-row">
    <i-date-picker :firstDayOfWeek="0" />
    <i-date-picker :firstDayOfWeek="1" />
  </div>
</template>

显示代码复制代码复制代码

自定义分隔符

可通过 rangeSeparator 属性指定日期范围选择器的连接分隔符。

<template>
  <i-date-picker type="range" rangeSeparator="/" />
</template>

显示代码复制代码复制代码

DatePicker Attributes

属性	说明	类型	默认值
modelValue / v-model	固定选中值（受控）	string	--
defaultValue	默认选中值（非受控）	string	--
trigger	触发方式	"hover"〡"click"〡"context-menu"	click
disabled	是否禁用选择器	boolean	false
type	日期选择器类型	"date"〡"range"	date
rangeSeparator	范围日期分隔符	string	-
firstDayOfWeek	每周的第一天，0 为周日，1 为周一	0〡1	1

DatePicker Events

属性	说明	类型	默认值
change	选中值发生变化时触发	(value: string) => void	--