基于Vant实现日期时间选择器（选到秒）_vant时间选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44734152/article/details/131002455

该文章展示了一个基于VantUI库编写的Vue组件，用于实现日期时间选择器，功能细化到秒。组件使用了van-calendar和van-picker，提供了选择日期和时间（小时、分钟、秒）的功能，并在选择后进行确认和取消操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现基于Vant实现日期时间选择器（选到秒）组件。

dateTimePicker.vue

<template>
  <div class="container">
    <van-calendar v-model="showPicker" color="#357cea"
                  :default-date="defaultDate"
                  :min-date="minDate" class="calendar"
                  :max-date="maxDate"
                  :show-confirm="true"
                  @confirm="onConfirmDate"
                  @cancel="showPicker = false"
    >
      <template v-if="type !== 'date'" slot="title">
        <div class="calendar-title" @click="timerPicker = true">
          {{ selectTimeToSeconds }}
        </div>
      </template>
    </van-calendar>
    <van-overlay class="time-picker" :show="timerPicker" @click="timerPicker = false">
      <van-picker show-toolbar title="选择时间" :columns="timeColumns" @confirm="confirmTime" />
    </van-overlay>
  </div>
</template>

<script>
import moment from 'moment';
import {
  Picker, Calendar, Overlay,
} from 'vant';

export default {
  name: 'DateTimePicker',
  components: {
    [Picker.name]: Picker,
    [Calendar.name]: Calendar,
    [Overlay.name]: Overlay,
  },
  props: {
    // 类型 选择到秒还是只到日期
    type: {
      type: String,
      default() {
        return 'seconds';
      },
    },
    showTimePicker: {
      type: Boolean,
      default() {
        return false;
      },
    },
    minDate: {
      type: Date,
      default() {
        return new Date(2010, 0, 1);
      },
    },
    defaultDate: {
      type: Date,
      default() {
        return new Date();
      },
    },
    maxDate: {
      type: Date,
      default() {
        return new Date(2050, 0, 1);
      },
    },
  },
  data() {
    return {
      showPicker: this.showTimePicker,
      timerPicker: false,
      selectTimeToSeconds: moment().format('HH:mm:ss'),
      timeColumns: [
        {
          values: this.createTimeList(23),
          defaultIndex: Number(moment().format('HH')),
        },
        {
          values: this.createTimeList(59),
          defaultIndex: Number(moment().format('mm')),
        },
        {
          values: this.createTimeList(59),
          defaultIndex: Number(moment().format('ss')),
        },
      ],
    };
  },
  watch: {
    showTimePicker: {
      handler() {
        this.showPicker = true;
      },
      immidiate: true,
    },
  },
  methods: {
    createTimeList(N) {
      const foo = [];
      for (let i = 0; i <= N; i += 1) {
        if (i < 10) {
          foo.push(`0${i}`);
        } else {
          foo.push(i);
        }
      }
      return foo;
    },
    // 发现时间
    onConfirmDate(date) {
      let selectTime = '';
      if (this.type === 'date') {
        selectTime = `${moment(date).format('YYYY-MM-DD')
        } `;
      } else {
        selectTime = `${moment(date).format('YYYY-MM-DD')
        } ${this.selectTimeToSeconds}`;
      }
      this.$emit('onConfirmDate', selectTime);
      this.showPicker = false;
    },
    confirmTime(value) {
      this.selectTimeToSeconds = `${value[0]}:${value[1]}:${value[2]}`;
      this.timerPicker = false;
    },
  },
};
</script>

<style scoped lang="less">
.container {
   .time-picker {
  z-index: 2100 !important;
   display: flex;
    align-items: center;
    /deep/ .van-picker {
      width:100%;
    }
}
}

</style>