CODEWITHSUNDEEP
javascriptvue.jsvuejs2datepickervue-component
Helenesh
Helenesh

Reputation: 4349

VueJS Datepicker: dynamically change data based on month

I am new to VueJS and I'm incorporating the vue-hotel-datepicker library into my project.

Goal: change the minNights data property depending on the month. I was able to simply override that value as described in the documentation.

enter image description here

Problem: minNights should be 8 in August and July. When I use the Vue inspector, I can see that the HotelDatePicker component (imported from the library) has an 'activeMonthIndex', so I believe I should use that. But how can I access this data property from my parent? How can I dynamically change the minNights property based on the month?

enter image description here

My template:

<datepicker
    :startDate="startDate"
    @check-in-changed="setCheckInDate"
    @check-out-changed="setCheckOutDate"
    :maxNights="21"
    :minNights="minNights" //dynamic based on month
    :checkIn="checkIn"
    :checkOut="checkOut"
    :disabledDates="bookedDates"
    :firstDayOfWeek="1"
    :i18n="lang"
    :showYear="true"
 >

I have made a gist for those who wish to see my code. Any guidance is much appreciated.

Upvotes: 1

Views: 1729

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Your minNights prop should be bound to a computed property like :

<datepicker
:startDate="startDate"
@check-in-changed="setCheckInDate"
@check-out-changed="setCheckOutDate"
:maxNights="21"
:minNights="minNights" //dynamic based on month
:checkIn="checkIn"
:checkOut="checkOut"
:disabledDates="bookedDates"
:firstDayOfWeek="1"
:i18n="lang"
:showYear="true"
>

script :

  computed:{
        minNights(){

          let currentMonth=this.$children[0]._data.activeMonthIndex;
          if(currentMonth==6 || currentMonth==7){
             return currentMonth;
           }   
         }
     }

Upvotes: 1

Related Questions