Selected dates range by default

[Seaclick]

Hello @ManukMinasyan

Thanks for this awesome package, it works like a charm but I encounter a little issue. I am trying to select date range on page load when URL has checkin and checkout parameters. I have seen that it was possible here with marked-date-range prop, but i am surely missing something.

(vue-functional-calendar V. 2.8.61)

Here is how I proceed :

First of all, the URL:

As you can see there is the both datas: checkin and checkout. I get this datas thanks to a JS helper I created. I tested it of course in my console and it's working.

The FunctionalCalendar component is implemented like that:

When the component is created I use the helper to get the date range and call a method named "buildDateRange()".

Thanks this method I update the vue model with this:

In the Vue console we can see that the model is updated

Because It was not working, I have also try with the marked-date-range prop and the markedDateRange object:

And put the dates range in the marked-date-range prop int he "buildDateRange()" method like that:

As you can see, the datas are inserted in the markedDateRange on page load:

Unfortunately, it's still not working. :/

Am I missing something?

[ManukMinasyan]

Hello @Seaclick . Thank you for your message.

I think you missed the correct date format Please follow this source: https://codesandbox.io/s/vuejs-functional-calendar-component-5j096 Live demo: https://5j096.csb.app/?checkin=2020-3-20&checkout=2020-3-28

[Seaclick]

@ManukMinasyan Thanks for your answer, but it still not working.

I missed to tell you that the component is in a div with a v-show and is not showed on page load. Maybe it's because of that.

Anyway, thanks a lot for your help.

Regards,