Vant 日期时间组件拓展
基于
"vant": "^4.8.3",
效果图
<template><!-- 弹出层 --><van-popupv-model:show="isPicker"position="bottom"><van-pickerref="picker":title="title"v-model="selectedValues":columns="columns"@change="onChange"@cancel="cancelOn"@confirm="onConfirm"/></van-popup>
</template>js
<script setup lang="ts">
import { ref ,watch } from 'vue';
import {formatTimeArray} from "@/utils/formate/date_formate";const props = defineProps({showPicker: {type: Boolean,default: false,},title: {type: String,default: "请选择时间",},timeFormat: {type: String,default: "yyyy-MM-dd HH:mm:ss",},
})const isPicker = ref<any>(false) //是否显示弹出层
const columns = ref<any>([])
const picker = ref()
const getCountDays = (year: any, month: any) => {//获取某年某月多少天const day = new Date(year, month, 0);return day.getDate();
}const selectedValues = ref<any>(formatTimeArray(new Date()));const getColumns = () => {const Y: any = selectedValues.value[0];const M: any = selectedValues.value[1];let year: any = []; // 默认范围 前后十年for (let i = Y - 10; i <= Y + 10; i++) {year.push({text: i,value: i});}let month: any ;//月month = getColumn(13,true)let days: any = getCountDays(Y, M); //天，和当年月有关let day: any;day = getColumn(days + 1,true)let hour: any ; //小时hour = getColumn(24)let minute: any ; //分钟minute = getColumn(60)let seconds: any ; //秒seconds = getColumn(60)if (props.timeFormat?.includes("yyyy")) {columns.value.push(year);}if (props.timeFormat?.includes("MM")) {columns.value.push(month); //获取当月的天数}if (props.timeFormat?.includes("dd")) {columns.value.push(day);}if (props.timeFormat?.includes("HH")) {columns.value.push(hour);}if (props.timeFormat?.includes("mm")) {columns.value.push(minute);}if (props.timeFormat?.includes("ss")) {columns.value.push(seconds);}
}const getColumn = (length: any,isSplice: Boolean = false) => {if ( isSplice ) {const data = Array.from({ length }, (_, index) => ({ text: index, value: index }));return data.splice(1)} else {return Array.from({ length }, (_, index) => ({ text: index, value: index }));}
}const onChange = (values: any) => {let days: any = getCountDays(values.selectedValues[0], values.selectedValues[1]);let newDayColumn: any ;newDayColumn = getColumn(days + 1,true);columns.value[2] = newDayColumn
}const emits = defineEmits(["changeValue",'confirm']);const cancelOn = () => {emits("changeValue");
};const onConfirm = (val: any) => {let endVal: any = "";for (let i = 0; i < columns.value.length; i++) {endVal += val[i];if ( i === 2 ) {endVal += " ";} else if (i >= 3 && i <= 5) {endVal += ":";} else if (i < columns.value.length - 1) {endVal += "-";}}// 判断最后一个字符是否是分隔符if (endVal.endsWith("-") || endVal.endsWith(":")) {endVal = endVal.slice(0, -1); // 删除最后一个字符}emits("changeValue", endVal);emits("confirm", val.selectedValues);}// 监听 isPicker 的变化
watch(isPicker, (val: any) => {if (!val) {emits("changeValue");}columns.value = [];getColumns();
});// 监听 showPicker 的变化
watch(() => props.showPicker, (val) => {isPicker.value = val;
});</script>引用组件
<DateTimePicker@changeValue="showEndPicker = false"ref="popup":showPicker="showEndPicker"@confirm="onEndConfirm"/>结合 输入框一起使用
<van-fieldclass="form-wrapper"v-model="formData.pzzy_enddate"is-linkrequiredlabel-width="130"name="datePicker"label="批准作业结束时间"placeholder="点击选择时间"@click="showEndPicker = true"/><DateTimePicker@changeValue="showEndPicker = false"ref="popup":showPicker="showEndPicker"@confirm="onEndConfirm"/>