Блог

Главная - Вопросы по программированию - вопрос v-календаря, как отключить даты на основе дат в списке объектов arraylist

вопрос v-календаря, как отключить даты на основе дат в списке объектов arraylist

#javascript #vue.js #calendar #vuex #vcalendar

Вопрос:

я только начал писать код, и прямо сейчас мы используем v-calendar.io в нашем проекте airbnb нам нужно отключить даты на основе списка недоступных дат списка в бэкэнде.

 <v-date-picker
  class="date-picker"
  v-model="date"
  :disabled-dates="[new Date(2021, 9, 10)]"
  color="blue"
  is-range
/>

Таким образом, добавление дат в :отключенные даты работает, но как мне сделать так, чтобы он функционировал на основе списка массивов вместо жестко заданных дат? ( Я научился извлекать данные из бэкенда, но я не знаю, как кодировать, поэтому :отключенные даты принимают эту информацию )

Комментарии:

1. Что у тебя script на бирке? Вы используете свойство computed или data ?

2. спасибо за ваш ответ, я сейчас не использую никаких вычислений, просто использую код vcalendar, предоставленный на их сайте. <скрипт> экспорт по умолчанию { данные() { возврат { диапазон: { начало: новая дата(2020, 0, 1), конец: новая дата(2020, 0, 5), }, }; }, }; <сценарий></сценарий>

Ответ №1:

Поместите свой массив дат в данные компонентов Vue:

 data: () => ({
   disabledDays: [] // later populated from API call
})

Тогда вы можете сделать:

 <v-date-picker
  class="date-picker"
  v-model="date"
  :disabled-dates="disabledDays" /*not hardcoded*/
  color="blue"
  is-range
/>

Как только вы получите строки дат из бэкенда, вы сможете преобразовать их в объекты дат, такие как:

 this.disabledDays = response.disabledDates.map(string => new Date(string))`

Комментарии:

1. Привет, спасибо за ваш ответ, я немного смущен, разве это не должно быть похоже на код vcalendar [Новая дата()] что-то? Существует ли какой-либо необходимый формат даты, когда мы сохраняем наш arraylist в бэкэнде?

2. Ваш сервер будет сохранять и возвращать формат данных в формате ISOString, как только вы получите эти строки во внешнем интерфейсе, вы сможете преобразовать их в объекты фактической даты, такие как this.disabledDays = response.dateStringsArrayFromBackend.map(string => new Date(string))

3. Извините, я уверен, что вы знаете об этом, но я действительно новичок в кодировании, поэтому я не могу понять часть response.dateStringsArrayFromBackend.map(строка => новая дата(строка)), я покажу ваш ответ своей группе, и мы посмотрим, что из этого получится. спасибо вам за помощь

Ответ №2:

Я придумал фрагмент, чтобы показать вам вещи попроще. Я ввожу setTimeout , mounted чтобы имитировать запрос с сервера, и через 1 секунду ответ придет с сервера и заполнит объекты disable_dates с датой.

Я использовал самый простой способ сопоставления строк с объектами даты, и вы также можете использовать map or normal for для достижения этой цели.

 new Vue({
  el: '#app',
  data: {
    date: null,
    disable_dates: [],

  },
  mounted() {
    setTimeout(() => {
      let string_dates_from_srver = ['2021-05-05', '2021-05-08']
      string_dates_from_srver.forEach((item) => {
        this.disable_dates.push(new Date(item))
      })
    }, 1000)
  }
}) 
 <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<link href="https://unpkg.com/v-calendar@2.3.0/lib/v-calendar.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/v-calendar@2.3.0/lib/v-calendar.umd.min.js"></script>
<div id='app'>

  <v-date-picker class="date-picker" v-model="date" :disabled-dates="disable_dates" color="blue" is-range></v-date-picker>

  {{date}}
</div>

Метки: ,