Vant 日期时间组件拓展

基于 

"vant": "^4.8.3",

效果图

<template>
    <!-- 弹出层 -->
    <van-popup
        v-model:show="isPicker"
        position="bottom"
    >
      <van-picker
          ref="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-field
          class="form-wrapper"
          v-model="formData.pzzy_enddate"
          is-link
          required
          label-width="130"
          name="datePicker"
          label="批准作业结束时间"
          placeholder="点击选择时间"
          @click="showEndPicker = true"
      />
      <DateTimePicker
          @changeValue="showEndPicker = false"
          ref="popup"
          :showPicker="showEndPicker"
          @confirm="onEndConfirm"
      />