Titans-UI

DatePicker 日期时间选择器

用于选择或输入日期时间

选择日期

基础的日期选择控件。

<template>
  <TiDatePicker v-model="date1" placeholder="请选择日期" ></TiDatePicker>
</template>
<script setup>
import { ref } from 'vue'
const date1 = ref('')
</script>

选择器模式 mode

共有四种模式：年份（ year ）、月份（ month ）、日期（ date ）、日期时间（ datetime ）。

mode="datetime" 时可以在同一个选择器里选择日期和时间。

<template>
  <TiDatePicker clearable placeholder="请选择年份" v-model="date1" mode="year" />
  <TiDatePicker clearable placeholder="请选择月份" v-model="date2" mode="month" />
  <TiDatePicker clearable placeholder="请选择日期" v-model="date3" mode="date" />
  <TiDatePicker clearable placeholder="请选择日期时间" v-model="date4" mode="datetime" />
</template>
<script setup>
import { ref } from 'vue'
const date1 = ref('')
const date2 = ref('')
const date3 = ref('')
const date4 = ref('')
</script>

选择日期范围

可在一个选择器中便捷地选择一个时间范围。

设置 range 属性即可启用范围选择，设置 start 属性和 end 属性绑定开始和结束时间。

~
~
<template>
  <TiDatePicker
    startPlaceholder="请选择开始日期"
    endPlaceholder="请选择结束日期"
    v-model:start="startDate"
    v-model:end="endDate"
    range
    clearable
  />
  <TiDatePicker
    startPlaceholder="请选择开始日期时间"
    endPlaceholder="请选择结束日期时间"
    v-model:start="startDateTime"
    v-model:end="endDateTime"
    range
    mode="datetime"
    clearable
  />
</template>
<script setup>
import { ref } from 'vue'
const startDate = ref(null)
const endDate = ref(null)
const startDateTime = ref(null)
const endDateTime = ref(null)
</script>

日期格式

使用 format 指定输入框的格式。 使用 value-format 指定绑定值的格式。

默认情况下，组件接受并返回的格式为：年份（YYYY）、月份（YYYY-MM）、日期（YYYY-MM-DD）、日期时间（YYYY-MM-DD HH:mm:ss）。

在 这里 查看 Day.js 支持的 format 参数。

DatePicker 属性

参数说明类型可选值默认值
model-value / v-model绑定值string——
mode类型stringyear / month / date / datetimeprimary
placeholder非范围选择时的占位内容string——
start-placeholder范围选择时开始日期的占位内容string——
end-placeholder范围选择时结束日期的占位内容string——
size多选框尺寸stringlarge / normal / small / mininormal
format显示在输入框中的格式（年份（YYYY）、月份（YYYY-MM）、日期（YYYY-MM-DD）、日期时间（YYYY-MM-DD HH:mm:ss））string请查看 日期格式—
value-format可选，绑定值的格式。 不指定时同 format 。string请查看 日期格式—
disabled是否禁用状态boolean—false
readonly是否只读状态boolean—false
clearable是否显示清除按钮boolean—false
range是否选择范围boolean—false
start选择范围时的开始日期的绑定值string——
end选择范围时的结束日期的绑定值string——
range-separator选择范围时的分隔符string—~

DatePicker 事件

事件名说明回调参数
update:start在选择范围时的开始日期变化时触发选择范围时的开始日期的绑定值
update:end在选择范围时的结束日期变化时触发选择范围时的结束日期的绑定值
clear在清除选择器中的值时触发—