<template>
    <div class="ht-base-date-picker-disabledate-demo">
        <ht-base-row>
            <ht-base-col span="24">
                <ht-base-date-picker type="date" :options="options1" @on-change="startTimeChange" placeholder="开始时间"
                                     v-model="starttime" style="width: 300px"></ht-base-date-picker>
            </ht-base-col>
        </ht-base-row>
        <br>
        <ht-base-row>
            <ht-base-col span="24">
                <ht-base-date-picker type="date" :options="options2" @on-change="endTimeChange" placeholder="结束时间"
                                     v-model="endtime" style="width: 300px"></ht-base-date-picker>
            </ht-base-col>
        </ht-base-row>
    </div>
</template>

<script>
  export default {
      name: 'HtBaseDatePickerDisabledateDemo',
      data() {
          return {
              startTimeOptions: {}, //开始日期设置
              endTimeOptions: {}, //结束日期设置
              starttime: '', //开始日期model
              endtime: '',//结束日期model
              options1: {
                  disabledDate (date) {
                      return date && date.valueOf() < Date.now() - 86400000;
                  }
              },
              options2: {
                  disabledDate (date) {
                      const disabledDay = date.getDate();
                      return disabledDay === 15;
                  }
              },
          }
      },
      methods: {
          startTimeChange: function(e) { //设置开始时间
              this.starttime = e;
              this.endTimeOptions = {
                  disabledDate: date => {
                      let startTime = this.starttime ? new Date(this.starttime).valueOf()- 1 * 24 * 60 * 60 * 1000 : '';
                      return date && (date.valueOf() < startTime);
                  }
              }
          },
          endTimeChange: function(e) { //设置结束时间
              this.endtime = e;
              let endTime = this.endtime? new Date(this.endtime).valueOf(): '';
              this.startTimeOptions = {
                  disabledDate(date) {
                      return date && date.valueOf() > endTime;
                  }
              }
          },
      }
  }
</script>
<style>
    .ht-base-date-picker-disabledate-demo {

    }
</style>

