介绍
组合了日期时间弹出框、输入框组件，实现了便捷快速的日期选择功能。
代码演示
基础使用
使用 v-model 绑定当前值，通过 title 和 placeholder 属性设置弹出框标题和输入框占位文本。
在点击输入框后会显示日期时间弹出框。
vue
<template>
<s-list card>
<s-list-item>
<s-datetime-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
clearable
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()" />
<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
<template>
<s-list card>
<s-list-item>
<s-datetime-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
clearable
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()" />
<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>输入框日期格式
使用 outlet-format 属性自定义输入框日期展示的格式。
vue
<template>
<s-list card>
<s-list-item>
<s-datetime-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
clearable
type="yMd"
outlet-format="YYYY年MM月DD日"
@change="onChange"
/>
</s-list-item>
<s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
<s-list-item title="设置为当前时间" arrow hover @click="value = 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
<template>
<s-list card>
<s-list-item>
<s-datetime-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
clearable
type="yMd"
outlet-format="YYYY年MM月DD日"
@change="onChange"
/>
</s-list-item>
<s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
<s-list-item title="设置为当前时间" arrow hover @click="value = 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>绑定值的格式
默认绑定的值为 Date 实例，提交到后端时需要手动转换为特定格式的字符串；使用 value-format 属性可以将这个转换交由组件库处理。
vue
<template>
<s-list card>
<s-list-item>
<s-datetime-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
clearable
type="yMd"
value-format="YYYY/MM/DD"
@change="onChange"
/>
</s-list-item>
<s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
<s-list-item title="设置为 2025/01/01" arrow hover @click="value = '2025/01/01'" />
<s-list-item title="清空" arrow hover @click="value = undefined" />
</s-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>
<s-list card>
<s-list-item>
<s-datetime-picker-input
v-model="value"
title="请选择日期"
placeholder="请选择日期"
clearable
type="yMd"
value-format="YYYY/MM/DD"
@change="onChange"
/>
</s-list-item>
<s-list-item title="当前值：" :value="JSON.stringify(value) ?? 'undefined'" />
<s-list-item title="设置为 2025/01/01" arrow hover @click="value = '2025/01/01'" />
<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>min、max 联动
可以通过 min 和 max 属性使两个选择器联动。
选择日期时间范围，使用 DatetimeRangePickerInput 是更好的选择。
vue
<template>
<s-form>
<s-form-item label="开始时间" star-position="end" name="startTime">
<s-datetime-picker-input
v-model="formData.startTime"
title="请选择开始时间"
placeholder="请选择开始时间"
clearable
type="yMdh"
outlet-format="YYYY-MM-DD HH时"
/>
</s-form-item>
<s-form-item label="结束时间" star-position="end" name="endTime">
<s-datetime-picker-input
v-model="formData.endTime"
title="请选择结束时间"
placeholder="请选择结束时间"
clearable
type="yMdh"
outlet-format="YYYY-MM-DD HH时"
:min="formData.startTime"
/>
</s-form-item>
</s-form>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const formData = reactive({
startTime: undefined,
endTime: undefined,
})
</script>vue
<template>
<s-form>
<s-form-item label="开始时间" star-position="end" name="startTime">
<s-datetime-picker-input
v-model="formData.startTime"
title="请选择开始时间"
placeholder="请选择开始时间"
clearable
type="yMdh"
outlet-format="YYYY-MM-DD HH时"
/>
</s-form-item>
<s-form-item label="结束时间" star-position="end" name="endTime">
<s-datetime-picker-input
v-model="formData.endTime"
title="请选择结束时间"
placeholder="请选择结束时间"
clearable
type="yMdh"
outlet-format="YYYY-MM-DD HH时"
:min="formData.startTime"
/>
</s-form-item>
</s-form>
</template>
<script setup lang="js">
import { reactive } from 'vue'
const formData = reactive({
startTime: undefined,
endTime: undefined,
})
</script>API
DatetimePickerInputProps
继承 DatetimePickerPopoutProps 和 PopoutInputProps 。
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| outlet-format | 输出到输入框的日期格式，不指定则根据 type 属性自动生成格式 | string 详见特殊符号 | - |
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',
}