介绍
组合了日期时间、弹出框组件,实现了便捷快速的日期选择功能。
引入
js
import DatetimePickerPopout from 'sard-uniapp/components/datetime-picker-popout/datetime-picker-popout.vue'代码演示
基础使用
使用 v-model 双向绑定当前值,使用 v-model:visible 控制弹出框显隐。
vue
<template>
<sar-datetime-picker-popout
v-model="value"
v-model:visible="visible"
title="请选择日期"
type="yMd"
@change="onChange"
/>
<sar-list card>
<sar-list-item>
<sar-button @click="visible = true">
{{ value ? formatDate(value, 'YYYY-MM-DD') : '请选择' }}
</sar-button>
</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'
import { formatDate } from 'sard-uniapp'
const value = ref<Date | undefined>(new Date())
const visible = ref(false)
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-datetime-picker-popout
v-model="value"
v-model:visible="visible"
title="请选择日期"
type="yMd"
@change="onChange"
/>
<sar-list card>
<sar-list-item>
<sar-button @click="visible = true">
{{ value ? formatDate(value, 'YYYY-MM-DD') : '请选择' }}
</sar-button>
</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(/* @__PURE__ */ new Date());
const visible = ref(false);
const onChange = (value2) => {
console.log("change", value2);
};
</script>类型
可以使用 yMdhms(年月日时分秒)进行任意组合,每个字母对应一列。
vue
<template>
<sar-datetime-picker-popout
v-model="date1"
v-model:visible="visible1"
title="年月日"
type="yMd"
value-format="YYYY-MM-DD"
/>
<sar-datetime-picker-popout
v-model="date2"
v-model:visible="visible2"
title="时分秒"
type="hms"
value-format="HH:mm:ss"
/>
<sar-datetime-picker-popout
v-model="date3"
v-model:visible="visible3"
title="月日时"
type="Mdh"
value-format="MM-DD HH"
/>
<sar-list card>
<sar-list-item
title="年月日"
arrow
hover
:value="JSON.stringify(date1)"
@click="visible1 = true"
/>
<sar-list-item
title="时分秒"
arrow
hover
:value="JSON.stringify(date2)"
@click="visible2 = true"
/>
<sar-list-item
title="月日时"
arrow
hover
:value="JSON.stringify(date3)"
@click="visible3 = true"
/>
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const date1 = ref<Date>()
const date2 = ref<Date>()
const date3 = ref<Date>()
const visible1 = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
</script>vue
<template>
<sar-datetime-picker-popout
v-model="date1"
v-model:visible="visible1"
title="年月日"
type="yMd"
value-format="YYYY-MM-DD"
/>
<sar-datetime-picker-popout
v-model="date2"
v-model:visible="visible2"
title="时分秒"
type="hms"
value-format="HH:mm:ss"
/>
<sar-datetime-picker-popout
v-model="date3"
v-model:visible="visible3"
title="月日时"
type="Mdh"
value-format="MM-DD HH"
/>
<sar-list card>
<sar-list-item
title="年月日"
arrow
hover
:value="JSON.stringify(date1)"
@click="visible1 = true"
/>
<sar-list-item
title="时分秒"
arrow
hover
:value="JSON.stringify(date2)"
@click="visible2 = true"
/>
<sar-list-item
title="月日时"
arrow
hover
:value="JSON.stringify(date3)"
@click="visible3 = true"
/>
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const date1 = ref();
const date2 = ref();
const date3 = ref();
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
</script>自定义日期时间范围
可以使用 min 和 max 属性限制可以选择的日期时间的范围。
vue
<template>
<sar-datetime-picker-popout
v-model="date1"
v-model:visible="visible1"
type="yMd"
:min="new Date(2000, 4, 13)"
:max="new Date(2003, 6, 8)"
/>
<sar-datetime-picker-popout
v-model="date2"
v-model:visible="visible2"
type="hms"
:min="new Date(0, 0, 1, 9, 0, 0)"
:max="new Date(0, 0, 1, 18, 30, 0)"
/>
<sar-list card>
<sar-list-item
title="2000年5月13日 -> 2003年6月8日"
arrow
hover
:value="JSON.stringify(date1)"
@click="visible1 = true"
/>
<sar-list-item
title="9时0分0秒 -> 18时30分0秒"
arrow
hover
:value="JSON.stringify(date2)"
@click="visible2 = true"
/>
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const date1 = ref<Date>()
const date2 = ref<Date>()
const visible1 = ref(false)
const visible2 = ref(false)
</script>vue
<template>
<sar-datetime-picker-popout
v-model="date1"
v-model:visible="visible1"
type="yMd"
:min="new Date(2000, 4, 13)"
:max="new Date(2003, 6, 8)"
/>
<sar-datetime-picker-popout
v-model="date2"
v-model:visible="visible2"
type="hms"
:min="new Date(0, 0, 1, 9, 0, 0)"
:max="new Date(0, 0, 1, 18, 30, 0)"
/>
<sar-list card>
<sar-list-item
title="2000年5月13日 -> 2003年6月8日"
arrow
hover
:value="JSON.stringify(date1)"
@click="visible1 = true"
/>
<sar-list-item
title="9时0分0秒 -> 18时30分0秒"
arrow
hover
:value="JSON.stringify(date2)"
@click="visible2 = true"
/>
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const date1 = ref();
const date2 = ref();
const visible1 = ref(false);
const visible2 = ref(false);
</script>过滤器
可以使用 filter 属性来仅展示想要的内容,只有返回真的值才会展示。
vue
<template>
<sar-datetime-picker-popout
v-model="date"
v-model:visible="visible"
title="取15的倍数的分钟数"
type="hm"
:filter="filter"
/>
<sar-list card>
<sar-list-item
title="取15的倍数的分钟数"
arrow
hover
:value="JSON.stringify(date)"
@click="visible = true"
/>
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { type DatetimeLetter } from 'sard-uniapp'
const visible = ref(false)
const date = ref<Date>()
const filter = (letter: DatetimeLetter, value: number) => {
if (letter === 'm') {
return value % 15 === 0
}
return true
}
</script>vue
<template>
<sar-datetime-picker-popout
v-model="date"
v-model:visible="visible"
title="取15的倍数的分钟数"
type="hm"
:filter="filter"
/>
<sar-list card>
<sar-list-item
title="取15的倍数的分钟数"
arrow
hover
:value="JSON.stringify(date)"
@click="visible = true"
/>
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const visible = ref(false);
const date = ref();
const filter = (letter, value) => {
if (letter === "m") {
return value % 15 === 0;
}
return true;
};
</script>格式化
可以使用 formatter 属性格式化展示的内容。
vue
<template>
<sar-datetime-picker-popout
v-model="date"
v-model:visible="visible"
title="英文月日年"
type="Mdy"
:formatter="formatter"
/>
<sar-list card>
<sar-list-item
title="英文月日年"
arrow
hover
:value="JSON.stringify(date)"
@click="visible = true"
/>
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { type DatetimeColumnOption, type DatetimeLetter } from 'sard-uniapp'
const visible = ref(false)
const date = ref<Date>()
const monthAbbreviations: Record<number, string> = {
0: 'Jan',
1: 'Feb',
2: 'Mar',
3: 'Apr',
4: 'May',
5: 'Jun',
6: 'Jul',
7: 'Aug',
8: 'Sep',
9: 'Oct',
10: 'Nov',
11: 'Dec',
}
function getEnglishDateRepresentation(day: number) {
let suffix = 'th'
if (day === 1 || day === 21 || day === 31) {
suffix = 'st'
} else if (day === 2 || day === 22) {
suffix = 'nd'
} else if (day === 3 || day === 23) {
suffix = 'rd'
}
return day + suffix
}
const formatter = (letter: DatetimeLetter, option: DatetimeColumnOption) => {
if (letter === 'M') {
return monthAbbreviations[option.value - 1]
}
if (letter === 'd') {
return getEnglishDateRepresentation(option.value)
}
if (letter === 'y') {
return option.zerofill
}
}
</script>vue
<template>
<sar-datetime-picker-popout
v-model="date"
v-model:visible="visible"
title="英文月日年"
type="Mdy"
:formatter="formatter"
/>
<sar-list card>
<sar-list-item
title="英文月日年"
arrow
hover
:value="JSON.stringify(date)"
@click="visible = true"
/>
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const visible = ref(false);
const date = ref();
const monthAbbreviations = {
0: "Jan",
1: "Feb",
2: "Mar",
3: "Apr",
4: "May",
5: "Jun",
6: "Jul",
7: "Aug",
8: "Sep",
9: "Oct",
10: "Nov",
11: "Dec"
};
function getEnglishDateRepresentation(day) {
let suffix = "th";
if (day === 1 || day === 21 || day === 31) {
suffix = "st";
} else if (day === 2 || day === 22) {
suffix = "nd";
} else if (day === 3 || day === 23) {
suffix = "rd";
}
return day + suffix;
}
const formatter = (letter, option) => {
if (letter === "M") {
return monthAbbreviations[option.value - 1];
}
if (letter === "d") {
return getEnglishDateRepresentation(option.value);
}
if (letter === "y") {
return option.zerofill;
}
};
</script>农历
可以设置 calendar="lunar" 将历法类型改为农历。农历仅用于展示,实际绑定的值还是公历。
vue
<template>
<sar-datetime-picker-popout
v-model="date1"
v-model:visible="visible1"
title="年月日"
type="yMd"
calendar="lunar"
value-format="YYYY-MM-DD"
/>
<sar-datetime-picker-popout
v-model="date2"
v-model:visible="visible2"
title="年月日时分"
type="yMdhm"
calendar="lunar"
value-format="YYYY-MM-DD HH:mm"
/>
<sar-datetime-picker-popout
v-model="date3"
v-model:visible="visible3"
title="月日时"
type="Mdh"
calendar="lunar"
value-format="MM-DD HH"
/>
<sar-list card>
<sar-list-item
title="年月日"
arrow
hover
:value="JSON.stringify(date1)"
@click="visible1 = true"
/>
<sar-list-item
title="年月日时分"
arrow
hover
:value="JSON.stringify(date2)"
@click="visible2 = true"
/>
<sar-list-item
title="月日时"
arrow
hover
:value="JSON.stringify(date3)"
@click="visible3 = true"
/>
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const date1 = ref<Date>()
const date2 = ref<Date>()
const date3 = ref<Date>()
const visible1 = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
</script>vue
<template>
<sar-datetime-picker-popout
v-model="date1"
v-model:visible="visible1"
title="年月日"
type="yMd"
calendar="lunar"
value-format="YYYY-MM-DD"
/>
<sar-datetime-picker-popout
v-model="date2"
v-model:visible="visible2"
title="年月日时分"
type="yMdhm"
calendar="lunar"
value-format="YYYY-MM-DD HH:mm"
/>
<sar-datetime-picker-popout
v-model="date3"
v-model:visible="visible3"
title="月日时"
type="Mdh"
calendar="lunar"
value-format="MM-DD HH"
/>
<sar-list card>
<sar-list-item
title="年月日"
arrow
hover
:value="JSON.stringify(date1)"
@click="visible1 = true"
/>
<sar-list-item
title="年月日时分"
arrow
hover
:value="JSON.stringify(date2)"
@click="visible2 = true"
/>
<sar-list-item
title="月日时"
arrow
hover
:value="JSON.stringify(date3)"
@click="visible3 = true"
/>
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const date1 = ref();
const date2 = ref();
const date3 = ref();
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
</script>API
DatetimePickerPopoutProps
继承 DatetimePickerProps 并有以下额外属性:
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| popout-class | 弹窗框根元素类名 | string | - |
| popout-style | 弹窗框根元素样式 | StyleValue | - |
| visible (v-model) | 是否显示弹出框 | boolean | - |
| title | 弹出框标题 | string | - |
| validate-event | 是否触发表单验证 | boolean | true |
| resettable 1.23.3+ | 关闭弹出框后,是否可复位弹出框值 | boolean | false |
DatetimePickerPopoutEmits
| 事件 | 描述 | 类型 |
|---|---|---|
| update:model-value | 日期时间输入组件值改变时触发 | (value: Date | string | undefined) => void |
| change | 日期时间输入组件值改变时触发 | (value: Date |string | undefined) => void |
| update:visible | 弹出框显隐时触发 | (visible: boolean) => void |
| confirm 1.22.1+ | 点击确定按钮时触发 | () => void |
| visible-hook 1.22.1+ | 入场/退场动画状态改变时触发 | (name: TransitionHookName) => void |
| before-enter 1.22.1+ | 入场动画开始前触发 | () => void |
| enter 1.22.1+ | 入场动画开始时触发 | () => void |
| after-enter 1.22.1+ | 入场动画结束时触发 | () => void |
| enter-cancelled 1.22.1+ | 入场动画取消时触发 | () => void |
| before-leave 1.22.1+ | 退场动画开始前触发 | () => void |
| leave 1.22.1+ | 退场动画开始时触发 | () => void |
| after-leave 1.22.1+ | 退场动画结束时触发 | () => void |
| leave-cancelled 1.22.1+ | 退场动画取消时触发 | () => void |