Home > OS >  How to select three days using datepicker in vue
How to select three days using datepicker in vue

Time:02-01

Im using VCalendar - datepicker and I want to highlight days which are in my array: ['2022-02-01', '2022-02-08', '2022-02-15'], I cant find this in documentation, there is only single date or range of dates, but not alone dates like in my array, which are all tuesdays for example.

CodePudding user response:

Actually VCalendar has documentation to achieve multiple date selection https://vcalendar.io/examples/datepickers.html#multiple-dates

new Vue({
  el: "#app",
  data: () => ({
    dates: ['2022-02-01', '2022-02-08', '2022-02-15']
  }),
  
  computed: {
    attributes() {
      return this.dates.map(date => ({
        highlight: true,
        dates: date,
      }));
        }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/v-calendar.umd.min.js"></script>
<div id="app">
  <v-calendar :attributes="attributes" />
</div>

  •  Tags:  
  • Related