介绍
组合了日期时间范围弹出框、输入框组件,实现了便捷快速的日期时间范围选择功能。
引入
js
import DatetimeRangePickerInput from 'sard-uniapp/components/datetime-range-picker-input/datetime-range-picker-input.vue'代码演示
基础使用
和 DatetimePickerInput 组件用法类似,多了一个 tabs 属性设置起始和结束标签页标题。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-datetime-range-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
:tabs="['开始日期', '结束日期']"
clearable
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-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
:tabs="['开始日期', '结束日期']"
clearable
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>输入框日期格式
使用 outlet-format 属性自定义输入框日期展示的格式。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-datetime-range-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
:tabs="['开始日期', '结束日期']"
clearable
type="yMd"
outlet-format="YYYY年MM月DD日"
@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-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
:tabs="['开始日期', '结束日期']"
clearable
type="yMd"
outlet-format="YYYY年MM月DD日"
@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>绑定值的格式
默认绑定的值为 Date 实例,提交到后端时需要手动转换为特定格式的字符串;使用 value-format 属性可以将这个转换交由组件库处理。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-datetime-range-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
:tabs="['开始日期', '结束日期']"
clearable
type="yMd"
value-format="YYYY/MM/DD"
@change="onChange"
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(value) ?? 'undefined'"
/>
<sar-list-item
title="设置为前一个月"
arrow
hover
@click="
value = [
formatDate(
new Date(new Date().setMonth(new Date().getMonth() - 1)),
'YYYY/MM/DD',
),
formatDate(new Date(), 'YYYY/MM/DD'),
]
"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="ts">
import { formatDate } from 'sard-uniapp'
import { ref } from 'vue'
const value = ref<string[]>()
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-list card>
<sar-list-item>
<sar-datetime-range-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
:tabs="['开始日期', '结束日期']"
clearable
type="yMd"
value-format="YYYY/MM/DD"
@change="onChange"
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(value) ?? 'undefined'"
/>
<sar-list-item
title="设置为前一个月"
arrow
hover
@click="
value = [
formatDate(
new Date(new Date().setMonth(new Date().getMonth() - 1)),
'YYYY/MM/DD',
),
formatDate(new Date(), 'YYYY/MM/DD'),
]
"
/>
<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>插槽
可以使用 header 插槽在顶部添加快捷选择按钮。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-datetime-range-picker-input
v-model="value"
v-model:visible="visible"
title="请选择日期"
placeholder="请选择日期"
:tabs="['开始日期', '结束日期']"
clearable
type="yMd"
>
<template #header>
<view class="flex flex-wrap justify-center">
<sar-button
v-for="item in shortcuts"
:key="item.text"
type="pale-text"
inline
@click="onShortcut(item)"
>
{{ item.text }}
</sar-button>
</view>
</template>
</sar-datetime-range-picker-input>
</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 visible = ref(false)
const shortcuts = [
{
text: '上周',
value: () => {
const end = new Date()
const start = new Date()
start.setDate(start.getDate() - 7)
return [start, end]
},
},
{
text: '上月',
value: () => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 1)
return [start, end]
},
},
{
text: '近三月',
value: () => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 3)
return [start, end]
},
},
]
const onShortcut = (item: (typeof shortcuts)[number]) => {
value.value = item.value()
visible.value = false
}
</script>vue
<template>
<sar-list card>
<sar-list-item>
<sar-datetime-range-picker-input
v-model="value"
v-model:visible="visible"
title="请选择日期"
placeholder="请选择日期"
:tabs="['开始日期', '结束日期']"
clearable
type="yMd"
>
<template #header>
<view class="flex flex-wrap justify-center">
<sar-button
v-for="item in shortcuts"
:key="item.text"
type="pale-text"
inline
@click="onShortcut(item)"
>
{{ item.text }}
</sar-button>
</view>
</template>
</sar-datetime-range-picker-input>
</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 visible = ref(false);
const shortcuts = [
{
text: "\u4E0A\u5468",
value: () => {
const end = /* @__PURE__ */ new Date();
const start = /* @__PURE__ */ new Date();
start.setDate(start.getDate() - 7);
return [start, end];
}
},
{
text: "\u4E0A\u6708",
value: () => {
const end = /* @__PURE__ */ new Date();
const start = /* @__PURE__ */ new Date();
start.setMonth(start.getMonth() - 1);
return [start, end];
}
},
{
text: "\u8FD1\u4E09\u6708",
value: () => {
const end = /* @__PURE__ */ new Date();
const start = /* @__PURE__ */ new Date();
start.setMonth(start.getMonth() - 3);
return [start, end];
}
}
];
const onShortcut = (item) => {
value.value = item.value();
visible.value = false;
};
</script>API
DatetimeRangePickerInputProps
继承 DatetimeRangePickerPopoutProps 并有以下额外属性:
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 弹出式输入框根元素类名 | string | - |
| root-style | 弹出式输入框根元素样式 | StyleValue | - |
| disabled | 禁用状态 | boolean | false |
| readonly | 只读状态 | boolean | false |
| clearable | 是否显示清空按钮 | boolean | false |
| placeholder | 输入框占位符内容 | string | - |
| outlet-format | 输出到输入框的日期格式,不指定则根据 type 属性自动生成格式 | string 详见特殊符号 | - |
| value-on-clear 1.19.2+ | 设置点击清除按钮后的值 | () => any | () => undefined |
| arrow 1.22+ | 自定义箭头图标名 | string | 'caret-right' |
| arrow-family 1.22+ | 自定义箭头图标字体 | string | 'sari' |
| input-props 1.22+ | 自定义输入框组件属性 | InputProps | - |
DatetimeRangePickerInputSlots
继承 PopoutInputSlots 和 DatetimeRangePickerPopoutSlots