vant-datetimePicker时间范围控件的使用

datetimePicker的使用

代码片段：

-------------html----------------------------------

          <van-cell-group>
            <van-field v-model="startTime" clearable label="开始时间" input-align="center" placeholder="请输入开始时间" @focus="start" readonly/>
            <van-field v-model="endTime" clearable label="结束时间" input-align="center" placeholder="请输入结束时间" @focus="end" readonly/>
          </van-cell-group>
          <!-- 开始时间控件 -->
          <van-popup v-model="showStart" position="bottom">
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="confirm"
              @cancel="cancel"
              :formatter="formatter"
            />
          </van-popup>
          <!-- 结束时间控件 -->
          <van-popup v-model="showEnd" position="bottom">
            <van-datetime-picker
              v-model="currentDate1"
              type="date"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="confirm1"
              @cancel="cancel1"
              :formatter="formatter"
            />
          </van-popup>

-------------js-------------------------------------

 data(){
    return {
      minDate: null,       //时间组件可选范围
      maxDate: null,
      date: '',
      currentDate: new Date(new Date().getTime()-86400000*6),   //时间组件默认选中默认时间
      currentDate1: new Date(),
      startTime: '',
      endTime: '',
      showStart: false,
      showEnd: false,
    }
  },
  created(){
    this.getMaxDate()
    this.restDate()
  },
  mounted(){

  },
  methods:{
    //初始化时间(当前一周)
    restDate() {
      this.endTime = this.formatDate(new Date())
      console.log(this.endTime)
      //获取前六天日期
      let agoDate = new Date(new Date().getTime()-86400000*6)
      this.startTime = this.formatDate(agoDate)
      console.log(this.startTime)

      // this.date = `${this.startTime} - ${this.endTime}`
    },
     // 选择开始时间
    start(e) {
      this.showStart = true;
    },
    // 选择结束时间
    end(e) {
      this.showEnd = true;
    },
    //最大最小时间处理
    getMaxDate() {
      let year = new Date().getFullYear()
      this.minDate = new Date(year - 1, 0, 1)
      this.maxDate = new Date(year + 1, 11, 31)
    },
    //日期格式
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    },
    //确认开始日期
    confirm(date) {
      this.showStart = false
      console.log(date,this.currentDate)
      this.startTime = this.formatDate(this.currentDate)
    },
    //确认结束日期
    confirm1(date) {
      this.showEnd = false
      console.log(date,this.currentDate1)
      this.endTime = this.formatDate(this.currentDate1)  
    },
    cancel(){
      this.showStart = false
    },
    cancel1(){
      this.showEnd = false
    },
    // 处理控件显示的时间格式
    formatter(type, value) {
      // 格式化选择器日期
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      } else if (type === "day") {
        return `${value}日`;
      } 
      return value;
    },

遇到的问题 ：

        1.时间组件未默认选中默认时间

 　　　　解决方法：在data() 定义组件默认时间currentDate,currentDate1,组件通过v-model绑定

　　2.点击输入框会出现打字键盘

               解决方法：在输入框中使用readonly属性，该属性为只读

       3.开始时间不能大于结束时间的比较

　　　  注意：不能直接通过this.startTime和this.endTime进行比较，需要转换成new Date()形式