All topics

Has anyone been successful in making a date range picker similar to Airbnb's?

Lucifer

5 months ago
I'm trying to do this with the vanilla calendar package and using 2 date entry fields but unsure if this is the right approach. How would you all build this? I have an API connected to Xano that can accept 2 dates (start & end).
🤔2
👍1
Tod

5 months ago
Great energy @Lucifer! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
Lucifer

5 months ago
Has anyone been successful in making a date range picker similar to Airbnb's?
@Lucifer
I'm trying to do this with the vanilla calendar package and using 2 date entry fields but unsure if this is the right approach. How would you all build this? I have an API connected to Xano that can accept 2 dates (start & end).
Kamil

5 months ago
Hello @Lucifer, this seems like a perfect case for using Vanilla Calendar. You would just need to enable the multiple-ranged setting to allow more than one date selection
cooldoge2
Lucifer

5 months ago
Yes! I got this to work! Thank you @Kamil 🙂
👍1
@Kamil
Hello @Lucifer, this seems like a perfect case for using Vanilla Calendar. You would just need to enable the multiple-ranged setting to allow more than one date selection
Dimble

1 month ago
Hi @Kamil - thanks for the Vanilla Calendar! I am struggling to see where to enable multiple-ranged - i can't find attribute selectionDatesMode in the plugin. I guess i'm missing something quite obvious 😆
Kamil

1 month ago
Hey @Dimble every option for "selection" can be set up in this object
👍1
jonnglass

1 month ago
@Dimble
I'm currently setting up a very similar Booking Calendar with Vanilla Calendar. I've spent countless hours figuring out how to do this and have some insight into how to achieve a few things that seemed impossible to me at first as I found the documentation to be a bit confusing. Let me know as I'm happy to help if I can...
@Kamil
Hey @Dimble every option for "selection" can be set up in this object
Dimble

1 month ago
Thank you so much, i read that it should be in {day} but couldn't find where to set it 😆
@jonnglass
@Dimble
I'm currently setting up a very similar Booking Calendar with Vanilla Calendar. I've spent countless hours figuring out how to do this and have some insight into how to achieve a few things that seemed impossible to me at first as I found the documentation to be a bit confusing. Let me know as I'm happy to help if I can...
Dimble

1 month ago
Hei @jonnglass - thanks i really appreciate it! Kamil helped out with where to set multiple-ranged, so now i have it working ok and passing start and end dates to the api. Next i want to see if i can get it to work with a dropdown to select pre-defined periods, like this month, last month, next month etc.
Kamil

1 month ago
@Dimble @jonnglass Sorry that the docs are not the best. Please let me know how I can improve them, and if you have more questions, feel free to ask in the package channel for Vanilla Calendar at https://discord.com/channels/972416966683926538/1221812695599415316. I am happy to help in any way.
jonnglass

29 days ago
@Kamil , no need to apologize. I wrapped my head around it and it all makes sense now. Probably just my understanding of Toddle to be honest. LOL
Happy to help make it better/easier to understand if you'd like another perspective. Let me know!
👍1
@Dimble
Hei @jonnglass - thanks i really appreciate it! Kamil helped out with where to set multiple-ranged, so now i have it working ok and passing start and end dates to the api. Next i want to see if i can get it to work with a dropdown to select pre-defined periods, like this month, last month, next month etc.
jonnglass

29 days ago
Great to hear! The pre-defined periods is a great idea. I could see myself adding that in eventually...

Has anyone been successful in making a date range picker similar to Airbnb's?

Lucifer

Tod

Lucifer

Kamil

Lucifer

Dimble

Kamil

jonnglass

Dimble

Dimble

Kamil

jonnglass

jonnglass

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community