v-calendar question, how to disable dates based on dates in an object's arraylist

Question

i just started to code, and right now we are using v-calendar.io in our airbnb project and we need to disable dates based on a listing's unavailable date arraylist in the backend.

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

So putting dates in the :disabled-dates works, but how do i do to make it function based on the arraylist instead of hard coded preset dates? ( I've learnt how to fetch data from backend, but i don't know how to code so the :disabled-dates take those info )

What's in your `script` tag? Are you using the `computed` or `data` property? — Iman Shafiei, May 07 '21 at 16:13
thank you for your reply, i am not using any computed right now, purely using the code vcalendar provided on their site. — NordicPanda, May 07 '21 at 16:26

T J · Accepted Answer · 2021-05-07T16:31:14.470

2

Put your array of dates into Vue components data:

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

Then you can do:

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

Once you receive date strings from backend, you can convert them into date objects like:

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

edited May 07 '21 at 16:31

answered May 07 '21 at 16:12

T J

42,762
13
83
138

Hi, thank you for your reply, i'm a bit confused, doesn't it need to be like vcalendar's code [New Date()] something? Is there any required date format when we save our arraylist in backend? – NordicPanda May 07 '21 at 16:24
Your backend would be saving and returning data format in [ISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) format, once you receive these strings in frontend, you can convert them to actual date objects like `this.disabledDays = response.dateStringsArrayFromBackend.map(string => new Date(string))` – T J May 07 '21 at 16:29
Sorry, i'm sure you know this stuff, but I'm really new to coding so i can't really understand the response.dateStringsArrayFromBackend.map(string => new Date(string)) part, i will show your answer to my group and we will see what we get out of it. thank you for the help – NordicPanda May 07 '21 at 16:48
Could you please tell me How can i disable all past dates from today ? – Abdelrhman Gad Dec 28 '22 at 10:10

score 0 · Answer 2 · answered May 08 '21 at 05:29

I came up with a snippet to show you things simpler. I put a setTimeout in mounted to simulate a request from the server, and after 1 second, the response will come from the server and fill the disable_dates with date objects.

I used the simplest way to map the strings to the date objects, and you can also use map or normal for to achieve this goal.

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>

v-calendar question, how to disable dates based on dates in an object's arraylist

2 Answers2