介绍

用于选择日期时间范围。

代码演示

基础使用

和 DatetimePicker 组件用法类似，多了一个 tabs 属性设置起始和结束标签页标题。

vue ts

<template>
  <s-list card>
    <s-list-item>
      <s-datetime-range-picker
        v-model="value"
        :tabs="['开始日期', '结束日期']"
        type="yMd"
        @change="onChange"
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为前一个月"
      arrow
      hover
      @click="value = [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()]"
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

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

const value = ref<Date[]>()

const onChange = (value: any) => {
  console.log('change', value)
}
</script>

vue js

<template>
  <s-list card>
    <s-list-item>
      <s-datetime-range-picker
        v-model="value"
        :tabs="['开始日期', '结束日期']"
        type="yMd"
        @change="onChange"
      />
    </s-list-item>
    <s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
    <s-list-item
      title="设置为前一个月"
      arrow
      hover
      @click="value = [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()]"
    />
    <s-list-item title="清空" arrow hover @click="value = undefined" />
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref()
const onChange = (value) => {
  console.log('change', value)
}
</script>

API

DatetimeRangePickerProps

继承 DatetimePickerProps 。

属性	描述	类型	默认值
model-value	绑定的值	(Date | string)[]	-
tabs	设置起始和结束标签页标题	string[]	-

DatetimeRangePickerEmits

事件	描述	类型
update:modelValue	选中的选项改变时触发	(date: (Date | string)[]) => void
change	选中的选项改变时触发	(date: (Date | string)[]) => void

DatetimeRangePickerSlots

插槽	描述	属性
header	自定义头部内容	() => void
footer	自定义底部内容	() => void