vant 日历+时分秒选择器

<!-- 时间 -->

<template>

  <div>

    <van-field v-if="!recordTime"

               readonly

               clickable

               required

               is-link

               name="calendar"

               :value="value"

               label="回溯时间"

               @click="showCalendar = true" />

    <van-field v-else

               readonly

               clickable

               required

               is-link

               name="calendar"

               :value="recordTime"

               label="回溯时间"

               @click="showCalendar = true" />

    <van-calendar v-model="showCalendar"

                  @confirm="onCalendarConfirm"

                  @select="showPicker = true"

                  :minDate="minDate">

    </van-calendar>

    <van-popup v-model="showPicker"

               round

               position="bottom">

      <van-picker ref="picker"

                  show-toolbar

                  :columns="columns"

                  @confirm="onPickerChange"

                  swipe-duration="500"

                  visible-item-count="5">

      </van-picker>

    </van-popup>

  </div>

</template>

<script>

export default {

  name: 'Calender',

  props: {

    recordTime: {

      type: String,

      default: ''

    }

  },

  data () {

    return {

      showCalendar: false,

      showPicker: false,

      Time: '',

      dayTime: '',

      minDate: new Date(1960, 0, 0),

      columns: [

        {

          values: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],

          defaultIndex: 0

        },

        {

          values: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],

          defaultIndex: 0

        },

        {

          values: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],

          defaultIndex: 0

        }

      ]

    }

  },

  mounted () {

  },

  methods: {

    onCalendarConfirm (date) {

      if (!this.Time) {

        if (date.getMonth() < 8) {

          if (date.getDate() < 10) {

            this.value = `${date.getFullYear()}-0${date.getMonth() + 1}-0${date.getDate()}  00:00:00`;

          } else {

            this.value = `${date.getFullYear()}-0${date.getMonth() + 1}-${date.getDate()}  00:00:00`;

          }

        } else {

          if (date.getDate() < 10) {

            this.value = `${date.getFullYear()}-${date.getMonth() + 1}-0${date.getDate()}  00:00:00`;

          } else {

            this.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}  00:00:00`;

          }

        }

      } else {

        if (date.getMonth() < 9) {

          if (date.getDate() < 10) {

            this.value = `${date.getFullYear()}-0${date.getMonth() + 1}-0${date.getDate()}  ${this.Time}`;

          } else {

            this.value = `${date.getFullYear()}-0${date.getMonth() + 1}-${date.getDate()}  ${this.Time}`;

          }

        } else {

          if (date.getDate() < 10) {

            this.value = `${date.getFullYear()}-${date.getMonth() + 1}-0${date.getDate()}  ${this.Time}`;

          } else {

            this.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}  ${this.Time}`;

          }

        }

      }

      this.showCalendar = false

      this.recordTime = this.value;

      console.log(this.value, '时间')

    },

    onPickerChange (el) {

      this.Time = `${el[0]}:${el[1]}:${el[2]}`

      this.showPicker = false

    }

  }

}

</script>

<style scoped>

</style>