介绍
用于选择日期时间范围。
引入
js
import DatetimeRangePicker from 'sard-uniapp/components/datetime-range-picker/datetime-range-picker.vue'代码演示
基础使用
和 DatetimePicker 组件用法类似,多了一个 tabs 属性设置起始和结束标签页标题。
vue
<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
<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 变量
scss
page,
.sar-portal {
--sar-datetime-range-picker-wrapper-duration: var(--sar-duration);
}