介绍
组合了日期时间弹出框、输入框组件,实现了便捷快速的日期选择功能。
引入
js
import DatetimePickerInput from 'sard-uniapp/components/datetime-picker-input/datetime-picker-input.vue'代码演示
基础使用
使用 v-model 绑定当前值,通过 title 和 placeholder 属性设置弹出框标题和输入框占位文本。
在点击输入框后会显示日期时间弹出框。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-datetime-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
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()"
/>
<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-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
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()"
/>
<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-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
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()"
/>
<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-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
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()"
/>
<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-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
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="设置为 2025/01/01"
arrow
hover
@click="value = '2025/01/01'"
/>
<sar-list-item title="清空" arrow hover @click="value = undefined" />
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref<string | undefined>('')
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-list card>
<sar-list-item>
<sar-datetime-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
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="设置为 2025/01/01"
arrow
hover
@click="value = '2025/01/01'"
/>
<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>min、max 联动
可以通过 min 和 max 属性使两个选择器联动。
选择日期时间范围,使用 DatetimeRangePickerInput 是更好的选择。
vue
<template>
<sar-form>
<sar-form-item label="开始时间" star-position="right" name="startTime">
<sar-datetime-picker-input
v-model="formData.startTime"
title="请选择开始时间"
placeholder="请选择开始时间"
clearable
type="yMdh"
outlet-format="YYYY-MM-DD HH时"
/>
</sar-form-item>
<sar-form-item label="结束时间" star-position="right" name="endTime">
<sar-datetime-picker-input
v-model="formData.endTime"
title="请选择结束时间"
placeholder="请选择结束时间"
clearable
type="yMdh"
outlet-format="YYYY-MM-DD HH时"
:min="formData.startTime"
/>
</sar-form-item>
</sar-form>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const formData = reactive({
startTime: undefined,
endTime: undefined,
})
</script>vue
<template>
<sar-form>
<sar-form-item label="开始时间" star-position="right" name="startTime">
<sar-datetime-picker-input
v-model="formData.startTime"
title="请选择开始时间"
placeholder="请选择开始时间"
clearable
type="yMdh"
outlet-format="YYYY-MM-DD HH时"
/>
</sar-form-item>
<sar-form-item label="结束时间" star-position="right" name="endTime">
<sar-datetime-picker-input
v-model="formData.endTime"
title="请选择结束时间"
placeholder="请选择结束时间"
clearable
type="yMdh"
outlet-format="YYYY-MM-DD HH时"
:min="formData.startTime"
/>
</sar-form-item>
</sar-form>
</template>
<script setup lang="js">
import { reactive } from "vue";
const formData = reactive({
startTime: void 0,
endTime: void 0
});
</script>API
DatetimePickerInputProps
继承 DatetimePickerPopoutProps 并有以下额外属性:
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| 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 | - |
type 到 outletFormat 的映射:
ts
const mapTypeFormat = {
y: 'YYYY',
yM: 'YYYY-MM',
yMd: 'YYYY-MM-DD',
yMdh: 'YYYY-MM-DD HH',
yMdhm: 'YYYY-MM-DD HH:mm',
yMdhms: 'YYYY-MM-DD HH:mm:ss',
hm: 'HH:mm',
hms: 'HH:mm:ss',
}js
const mapTypeFormat = {
y: 'YYYY',
yM: 'YYYY-MM',
yMd: 'YYYY-MM-DD',
yMdh: 'YYYY-MM-DD HH',
yMdhm: 'YYYY-MM-DD HH:mm',
yMdhms: 'YYYY-MM-DD HH:mm:ss',
hm: 'HH:mm',
hms: 'HH:mm:ss',
}