проблема с отключением дат в datepicker

Я использую средство выбора даты vue-date-range. Здесь я использую реквизиты disabledStart и disabledEnd, но не отключаю дату при просмотре. Для отключения даты требовался объект. Я передаю объект, но он не работает. Я не знаю, каков правильный формат объекта для отключения дат.

Будем признательны за любую помощь Ссылка на плагин https://www.npmjs.com/package/vue-date-range

Вот HTML

  <div class="form-group form-group-lg">
                <label>When is it required?</label>
                 <daterange class="calendar" 
                  :sync-range.sync="range" 
                  :disable-days-before-today="disableDaysBeforeToday"
                  :days-disabled-start="disableStart"
                  :days-disabled-end="disableEnd"
                  :lang="lang" @change="onChange">
                  </daterange> 
              </div>

JS

<script>
import { DateRange } from 'vue-date-range';
export default {


  data() {
    return {
      lang: 'en',
      disableDaysBeforeToday: true,
      disableStart: { startDate:moment()},
      disableEnd: {
       endDate: moment().add(7, 'days')
      },
      range: {}
    }

  },
  components: {
    'daterange': DateRange
  },

  methods: {

    onChange(range) {
      console.log("START", range.startDate._d);
      console.log("END", range.endDate._d);
    },
    disable() {
      console.log("on button click disable dates");
      this.disableStart._d = new Date('2017-08-25').toString()


    }


  }


}
</script>

javascript datepicker vue.js vuejs2 momentjs
person Wasiq Muhammad    schedule 21.08.2017    source источник
comment
Кажется, что days-disables-start и days-disabled-end должны быть просто moment.js датами, например disabledStart: moment()   -  person Phil    schedule 21.08.2017
comment
Спасибо, это сработало   -  person Wasiq Muhammad    schedule 21.08.2017

Ответы (1)


arrow_upward
2
arrow_downward

Как указал Phil, после просмотра исходный код этой библиотеки, я может подтвердить, что используемый объект является объектом даты moment.js.
Поэтому просто передайте объект даты moment.js days-disabled-start и days-disabled-end.

См. демонстрацию ниже.

new Vue({
    el: '#range',
    components: {
        'daterange':daterange.DateRange
    },
    data() {
      return {
        lang: 'en',
        range: {
          startDate: moment(),
          endDate: moment().add(2, 'days')
        },
        disableStart: moment().add(3, 'days'),
        disableEnd: moment().add(6, 'days')
      };
    },
    methods: {
      onChange(range) {
        this.range = range;
      },
      setRange (p) {
        if (typeof p === 'number') {
          console.log(p)
          this.range = {
            startDate: moment().add(p, 'days'),
            endDate: moment()
          }
        }
      },
    }
});
<script src="https://cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-date-range.min.js"></script>
<div id="range" class="calendar-wrapper">
    <span>{{range.startDate.format('YYYY-MM-DD')}}</span>~<span>{{range.endDate.format('YYYY-MM-DD')}}</span>
    <daterange class="calendar" 
      :sync-range="range" 
      :lang="lang" 
      :days-disabled-start="disableStart"
      :days-disabled-end="disableEnd"
      @change="onChange">
    </daterange>
    <button @click.stop.prevent="setRange(-7)">Last 7 days</button>
    <button @click.stop.prevent="setRange(-30)">Last 1 month</button>
</div>

person choasia    schedule 21.08.2017
comment
Спасибо.. это сработало.. но почему вы удаляете .sync в :sync-range.sync` - person Wasiq Muhammad; 21.08.2017
comment
я получил дату в этом формате 2017-08-24 как он может преобразовать в объект момента, чтобы его можно было отключить - person Wasiq Muhammad; 21.08.2017
comment
@WasiqMuhammad Привет, я не удалил это намеренно, я просто взял пример, показанный в файле readme его репо, и там не использовалось sync. - person choasia; 21.08.2017
comment
@WasiqMuhammad Привет! Ознакомьтесь с документом здесь: momentjs.com/docs/#/parsing/string. - person choasia; 21.08.2017
comment
если у меня есть инициализация disableStart: {}, это автоматически отключает все даты, так как сначала я хочу инициализировать даты без отключения, а затем при загрузке отключить даты - person Wasiq Muhammad; 21.08.2017
comment
@WasiqMuhammad Как насчет того, чтобы установить для disableStart и disableEnd значение null или очень большую дату? - person choasia; 21.08.2017
comment
ноль будет лучше спасибо - person Wasiq Muhammad; 21.08.2017
comment
@WasiqMuhammad Рад, что это помогло - person choasia; 21.08.2017
comment
Давайте продолжим обсуждение в чате. - person Wasiq Muhammad; 21.08.2017