vue:element.ui中两日期时间范围选择在同一个月内

copy的一份代码,做个笔记
此功能只适合选择一个月内任意日期,不能跨越到下个月,最长为30天。

在pickerOptions里写下面的代码:

onPick: ({ maxDate, minDate }) => {

    this.choiceDate = minDate.getTime()

    if (maxDate) {

       this.choiceDate = ''

     }

},

disabledDate: (time) => {

      const self = this;

     if (!!self.choiceDate) {

            const startDay = (new Date(self.choiceDate).getDate() - 1) * 24 * 3600 * 1000;

            const endDay = (new Date(

            new Date(self.choiceDate).getFullYear(),

            new Date(self.choiceDate).getMonth() + 1,

            0

            ).getDate() - new Date(self.choiceDate).getDate()) * 24 * 3600 * 1000;

             let minTime = self.choiceDate - startDay;

           let maxTime = self.choiceDate + endDay;

            return time.getTime() < minTime || time.getTime() > maxTime

      }

},

下面是只能选一周的代码:

onPick: ({ maxDate, minDate }) => {

         this.choiceDate = minDate.getTime()

        console.log('choiceDate',minDate.getTime())

        if (maxDate) {

               this.choiceDate = ''

        }

},

disabledDate: (time) => {

       const self = this;

        if (!!self.choiceDate) {

                 const startDay = new Date(self.choiceDate).getDate() - 1 ;

                 console.log('startDay1111:',startDay)

                 let minTime = self.choiceDate - startDay;

                  const day7 = 7 * 24 * 3600 * 1000

                  let maxTime = self.choiceDate + day7

                  return time.getTime() < minTime || time.getTime() > maxTime

          }

}

选择时间范围在一个月内:

data() {
  return {
    selectDate: '',   //  v-model绑定获取的时间
    //日期选择范围在一个月内
    pickerOptions: {
      onPick: ({maxDate, minDate}) => {
        this.selectDate= minDate.getTime();
        if (maxDate) {
          this.selectDate= ''
        }
      }, disabledDate: (time) => {
        if (this.selectDate!== '') {
          const one = 30 * 24 * 3600 * 1000;
          const minTime = this.selectDate- one;
          const maxTime = this.selectDate+ one;
          return time.getTime() < minTime || time.getTime() > maxTime
        }
      }
    }
  }
}

你可能感兴趣的:(vue,Element)