介绍

用于选择日期时间范围。

引入

import DatetimeRangePicker from 'sard-uniapp/components/datetime-range-picker/datetime-range-picker.vue'

代码演示

基础使用

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

vue lang="ts"

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

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

const value = ref<Date[]>()

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

vue lang="js"

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

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

API

DatetimeRangePickerProps

继承 DatetimePickerProps 并有以下额外属性：

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

DatetimeRangePickerEmits

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

DatetimeRangePickerSlots

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

主题定制

CSS 变量

page,
.sar-portal {
  --sar-datetime-range-picker-wrapper-duration: var(--sar-duration);
}