介绍
用于选择日期时间。
引入
js
import DatetimePicker from 'sard-uniapp/components/datetime-picker/datetime-picker.vue'代码演示
基础使用
通过 v-model 绑定当前值,通过 type 属性设置要展示的列类型。
vue
<template>
<sar-list card>
<sar-list-item>
<sar-datetime-picker v-model="date" type="yMd" @change="onChange" />
</sar-list-item>
<sar-list-item
title="当前值:"
:value="date ? formatDate(date, 'YYYY-MM-DD') : String(date)"
/>
<sar-list-item
title="设置为当前时间"
arrow
hover
@click="date = new Date()"
/>
<sar-list-item title="清空" arrow hover @click="date = undefined" />
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from 'sard-uniapp'
const date = ref<Date>()
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-list card>
<sar-list-item>
<sar-datetime-picker v-model="date" type="yMd" @change="onChange" />
</sar-list-item>
<sar-list-item
title="当前值:"
:value="date ? formatDate(date, 'YYYY-MM-DD') : String(date)"
/>
<sar-list-item
title="设置为当前时间"
arrow
hover
@click="date = new Date()"
/>
<sar-list-item title="清空" arrow hover @click="date = undefined" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const date = ref();
const onChange = (value) => {
console.log("change", value);
};
</script>更多案例,请参考 DatetimePickerPopout 组件
API
DatetimePickerProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| type | 设置每一列要展示的数据类型,每个字母对应一列 | string 详见特殊符号 | 'yMd' |
| calendar 1.18+ | 历法类型,可选公历或农历 | 'solar' | 'lunar' | 'solar' |
| min | 可选的最小日期 | Date | 十年前 |
| max | 可选的最大日期 | Date | 十年后 |
| model-value | 当前选中的日期 | Date | string | - |
| filter | 选项的过滤函数 | (letter: DatetimeLetter, value: number, date: Date, index: number) => boolean | - |
| formatter | 选项的格式化函数 | (letter: DatetimeLetter, option: DatetimeColumnOption, date: Date, index: number) => string | void |undefined | - |
| value-format 1.10+ | 绑定值的格式,不指定则绑定值为 Date 对象 | string 详见特殊符号 | - |
DatetimePickerEmits
| 事件 | 描述 | 类型 |
|---|---|---|
| update:model-value | 选中的选项改变时触发 | (date: Date | string) => void |
| change 1.9.2+ | 选中的选项改变时触发 | (date: Date | string) => void |
DatetimeLetter
ts
type DatetimeLetter = 'y' | 'M' | 'd' | 'h' | 'm' | 's'上面每个字母分别代表“年月日时分秒”。
DatetimeColumnOption
| 属性 | 描述 | 类型 |
|---|---|---|
| value | 选项值,如果是农历闰月,此值会为负数 | number |
| label | 展示的文本,默认中文会在值的后面加上“年月日时分秒” | string | number | boolean |
| zerofill | 填充前置 0 后的选项值字符串,可在格式化时使用 | string |