bootstrap-vue
bootstrap-vue copied to clipboard
Enhance b-form-datepicker - multiple dates / date range
Really like the date picker component. However there are a couple of features that I would like to see to make it our go to date picker.
Describe the solution you'd like
-
To be able to select a date range: click on 2 separate dates and the UI would show both dates selected as well as all the dates between the 2 dates. The data from this could be an array with a start and end date.
-
To be able to select multiple dates: click on as many dates as you like and they are all highlighted in the ui and added to an array of dates
IMHO, both of these use cases require 2 different components. Even date range != multiple random dates.
For date ranges, it is possible to use two b-calendar components to select start and end dates, and just set the min of the second calendar to the value of the first calendar.
For complex date input, we suggest the AirBnB Vue date picker.
We may in a future release add a new component that is tailored for date-range selection. But it will take time due to ARIA accessibility requirements (it needs to be usable by all users, not just users with a mouse/finger)
Even though the AirBnB picker (I assume it's https://github.com/MikaelEdebro/vue-airbnb-style-datepicker) might be usable in some cases, it has a design that differs quite a bit from bootstrap-vue and is therefore not an option for projects that need a consistent styling. I think not having to use calendar components outside bootstrap-vue has strong advantages and I am very inclined to migrate to the bootstrap-vue calendar / date-picker once it fulfills our requirements.
Any update on this?
Any update on this? @tmorehouse
Regards.
+1
+1
+1
+1
ayo
Hello! Do we have an update on this one? b-calendar component? With date range in 1 calendar?