时分秒 时间组件_Vant 实现日期+时分秒组件

Vant 实现日期组件

最近刚在项目中碰到一个需求，需要移动端h5页面写出一个日期组件，（包括日历和选时分秒）两部分，网上找了一圈发现antd是有这个需求的，但是我的项目已经使用了Vant，就按照它的逻辑自己在Vant日历的基础上，造了一个轮子。

代码

<template>
  <van-popup v-model="show" position="left" safe-area-inset-bottom class="calendar" @closed="handleCalendarClosed"
             @opened="handleCalendarOpened">
    <van-calendar
      ref="calendar"
      :poppable="false"
      allow-same-day
      color="#101a52"
      type="range"
      @confirm="onCalendarConfirm"
      @select="onCalendarSelect"
      :default-date="null"
      :minDate="minDate"
      :maxDate="maxDate"
    >
      <div slot="title" class="calendar-header">
        <icon class="icon" name="fanhui_m" @click="handleBack"></icon>
        <div class="title">日期选择</div>
        <span class="clear" v-show="startDate" @click.stop="handleClearDate">清除</span>
      </div>
      <div slot="footer" class="calendar-footer dis-flex flex-y-center">
        <div class="flex-box f-14 text">
          <p>开始时间：{
    { start }}</p>
          <p>结束时间：{
    { end }}</p>
        </div>
        <van-button color="#101a52" :disabled="isDisabled" @click="onCalendarConfirm">确定</van-button>
      </div>