自定义实现 dateSecPickerField 加了 时分

由于 Vant中DatePicker没有时分，所以自己封装了一个，与Field一起实现，这是 源码：

<template>
  <div>

    <van-field :required="isRequired" :model-value="modelValue" input-align="right" placeholder="请选择时间"
               :label="labelName"
               :error-message="modelValue !== ''? '':'必填'"
               error-message-align="right"
               @click="showEndDatePicker = true">
    </van-field>
    <van-popup :show="showEndDatePicker" position="bottom">

      <div class="toolbar">
        <span @click="showEndDatePicker = false">取消</span>
        <span @click="handleConfirm">确定</span>
      </div>

      <div class="date-sec-picker">
        <van-date-picker
          class="ymd-item"
          @change="onChangeYMD"
          :model-value="['0000', '00', '00']"
          :min-date="minDate"
          :max-date="maxDate"
        />
        <!--      时分秒  下边这个是分钟       item count  是展示时分秒  2 就是  时分   -->
        <van-picker
          class="ts-item"
          :columns="Array(23).fill().map((_, i) => ({
              text: `0${i +1}`.slice(-2),
              value: `0${i + 1}`.slice(-2)
            }))"
          @change="onChangeHours"
        />
        <van-picker
          class="ts-item"
          :columns="Array(60).fill().map((_, i) => ({
                        text: `0${i}`.slice(-2),
                        value: `0${i}`.slice(-2)
          }))"
          @change="onChangeMinutes"
        />
      </div>
    </van-popup>
  </div>
</template>

<script setup>

const props =
  defineProps({
    minDate: Date,
    maxDate: Date,
    labelName: String,
    modelValue: [Array, String],
    isRequired: Boolean,
    errMsg: {
      type: String,
      default: ''
    }
  })


// 小时  默认 1  分钟可以为0
const f_results = ref([`${props.minDate.getFullYear()}`, `0${props.minDate.getMonth() + 1}`.slice(-2), `0${props.minDate.getDate()}`.slice(-2)])
const hours = ref('01')
const minutes = ref('00')
// 定义emits
const emit = defineEmits(['onChangeValue'])
// 方法定义
const handleConfirm = () => {
  showEndDatePicker.value = false;

  // 拼接  1999-01-01 01:00
  let f_ymd = [...f_results.value].join('-')
  let f_ts = [hours.value, minutes.value].join(':')
  let f_result = [f_ymd, f_ts].join(' ')

  // 带值回去
  emit('onChangeValue', f_result)
}


const onChangeYMD = (val) => {
  f_results.value = val.selectedValues
}
const onChangeHours = (val) => {
  hours.value = val.selectedValues.pop()
}
const onChangeMinutes = (val) => {
  minutes.value = val.selectedValues.pop()
}


const showEndDatePicker = ref(false)
</script>

<style lang="less" scoped>
.toolbar {
  display: flex;
  justify-content: space-between;
  padding: 0.521vw  /* 10/19.2 */ 0.78125vw  /* 15/19.2 */;
  background-color: #fff;

  span {
    text-align: center;
    width: 15%;
  }
}

//第二个  span
.toolbar span:last-child {
  color: #3e88f8;

}

.date-sec-picker {
  display: flex;
  justify-content: center;
  width: 100%;

  :deep(.van-picker__toolbar ) {
    display: none;
  }

  .ymd-item {
    width: 60%;
  }

  .ts-item {
    width: 20%;
  }
}
</style>

返回的数据可以自定义修改
用法如下：

<DateSecPickerField
  :is-required="true"
  label-name="到 To"
  :min-date="new Date(1901, 0, 1)"
  :max-date="new Date()"
  :model-value="basicInformationRequestDTO.evaluationDateEnd"
  @onChangeValue="(value)=>{  basicInformationRequestDTO.evaluationDateEnd = value  }"
/>

这是运行结果