Vant Calendar日历处理返回日期格式

1、引入

import Vue from 'vue';
import { Calendar } from 'vant';

Vue.use(Calendar);

2、选择日期区间

设置 type 为 range 后可以选择日期区间，此时 confirm 事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。

 <!-- 日历 -->  
<van-calendar
      v-model="showDate"   //是否显示
      type="range"
      confirm-text="确认"   //自定义下方按钮文案
      confirm-disabled-text="请选择结束时间"
      color='#00CA9D'    //自定义主题色
      :min-date="minDate"   //最小日期
      :max-date="maxDate"   //最大日期
      title='报告时间'      //自定义弹框title
      @confirm="onConfirm"   //选中回调
/>

<!-- 初始化 --> 
data () {
    return {
      date:'',
      showDate:false,
      minDate:new Date('1900/01/01'),
      maxDate: new Date()
    }
  }

3、回调处理

默认返回的是时间戳，注意一定要转化为日期格式输出

 // 选择报告时间 
onConfirm(date) {
    const [start, end] = date;
    this.showDate = false;
    this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
},  
formatDate(now) {   //时间戳转日期格式
     let year=now.getFullYear();
     let month=now.getMonth()+1; 
     let date=now.getDate(); 
     return year+"-"+month+"-"+date;
 }