vue+vant的时间选择器如何只选择月日时分

vue+vant的时间选择器如何只选择月日时分

方法一：
在Vant的DatetimePicker组件上设置 type 属性为 ‘datetime’，然后使用 format 属性自定义要显示的时间格式。这里使用 format 将其格式化为只包含月份、日期和小时分钟的字符串：

<template>
    <div class="start-choice">
        <van-cell :value="startTime" @click="showPopup1" label="开始时间" />
        <van-popup v-model="showStart" round position="bottom">
            <van-datetime-picker v-model="currentDate" type="datetime" title="开始时间" :formatter="formatter"
                @confirm="onConfirmStart" @cancel="onCancel()" />
        </van-popup>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentDate: new Date(),
            startTime: "",  //开始时间
            showStart: false,
        }
    },
    methods: {
        // 初始化时间 年的时候不返回值
        formatter(type, value) {
            if (type === 'year') {
                return '';
            } else if (type === 'month' || type === 'day' || type === 'hour' || type === 'minute') {
                return value;
            }
        },
        // 显示设置开始时间
        showPopup1() {
            if (!this.showStart) {
                this.showStart = true;
            } else {
                this.showStart = false;
            }
        },
        // 开始时间-确定
        onConfirmStart(value) {
            this.showStart = false;
            const date = new Date(formatAll(value));
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const hours = date.getHours();
            const minutes = date.getMinutes();
            const formattedMinutes = String(minutes).padStart(2, '0');
            const formattedHours = String(hours).padStart(2, '0');
            this.startTime = `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day} ${formattedHours}:${formattedMinutes}`;
            console.log("this.endTime", this.endTime); // 打印结果: "04-20 10:36"
        },
    }
}
</script>

在赋值给startTime时候，要确保选择月、日、时、分不足两位数的时候，前面加多一个0

方法二：
引入格式化时间的js文件，代码更简洁

<template>
    <div class="start-choice">
        <van-cell :value="startTime" @click="showPopup1" label="开始时间" />
        <van-popup v-model="showStart" round position="bottom">
            <van-datetime-picker v-model="currentDate" type="datetime" title="开始时间" :formatter="formatter"
                @confirm="onConfirmStart" @cancel="onCancel()" />
        </van-popup>
    </div>
</template>

<script>
// 引入
import {  formatMonthDayhm } from "@/utils/utilsTime";
export default {
    data() {
        return {
            currentDate: new Date(),
            startTime: "",  //开始时间
            showStart: false,
        }
    },
    methods: {
        // 初始化时间 年的时候不返回值
        formatter(type, value) {
            if (type === 'year') {
                return '';
            } else if (type === 'month' || type === 'day' || type === 'hour' || type === 'minute') {
                return value;
            }
        },
        // 显示设置开始时间
        showPopup1() {
            if (!this.showStart) {
                this.showStart = true;
            } else {
                this.showStart = false;
            }
        },
        // 开始时间-确定
        onConfirmStart(value) {
            this.showStart = false;
            this.startTime = formatMonthDayhm(value)
            console.log("格式化时间", this.startTime)
        },
    }
}
</script>

utilsTime.js文件包含如下：

export function formatMonthDayhm(datetime) {
    return formatWithSeperator(datetime, "-", ":");
}
export function formatWithSeperator(datetime, dateSeprator, timeSeprator) {
    if (datetime != null) {
        const dateMat = new Date(datetime);
        const year = dateMat.getFullYear();
        let month = dateMat.getMonth() + 1;
        // 小于时的加多一个0 不然就是9和09的区别 
        if (month < 10) {
            month = "0" + month;
        }
        let day = dateMat.getDate();
        if (day < 10) {
            day = "0" + day;
        }
        let hh = dateMat.getHours();
        if (hh < 10) {
            hh = "0" + hh;
        }
        let mm = dateMat.getMinutes();
        if (mm < 10) {
            mm = "0" + mm;
        }
        let ss = dateMat.getSeconds();
        const timeFormat = month + dateSeprator + day + " " + hh + timeSeprator + mm;
        return timeFormat;
    }
}

注意：原本在Vant的DatetimePicker组件上设置 type 属性为 'datetime’时，时有年份值的，如今我们使用 format 将其格式化为只包含月份、日期和小时分钟的字符串，会导致年份没有值，但是会占据空间，如下：

我们需要把其隐藏掉，添加display: none：

<style scoped>
.start-choice>>>.van-picker__columns .van-picker-column:nth-child(1) {
    display: none !important;
}

.start-choice>>>.van-cell {
    width: 1.44rem;
    height: 0.36rem;
    background-color: #ffffff;
    border-radius: 0.04rem;
    border: solid 0.01rem #bbbbbb;
    font-size: 0.14rem !important;
    line-height: 0.19rem !important;
    color: #1a69f1 !important;
    padding: 0 !important;
}

.start-choice>>>.van-cell__value {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 99999 !important;
}
</style>

ok：

如果还需要格式化时间，日期后面加年月日时分的， format 属性自定义的时间格式如下：

 formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`;
                }
                if (type === 'month') {
                    return `${value}月`;
                }
                if (type === 'day') {
                    return `${value}日`;
                }
                return value;
            },

效果：