Topic: v5 datepicker programtically set min and max
Expected behavior I am migrating from the Bootstrap 4 to the Bootstrap 5 components (pro version) and am struggling with the new datepickers. I have a lot of From - To date pickers on my web app and need to reproduce the from-to behavior possible with the previous Bootstrap 4 datepickers.
What is the best way to programmatically and dynamically set min / max of a date picker as soon as another changes?
Actual behavior Right now, the only solution I found was to dispose the instance of the datepicker to be reset and create a new one with the new min or max date each time a date is changed. But this doesn't look like a very efficient nor elegant solution, is there something else?
Resources (screenshots, code snippets etc.)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: Mac Book Pro
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No
Michał Duszak staff commented 2 years ago
Unfortunately, right now this is the only way to do it, as there is no update() method implemented into the Datepicker component.
Boutrois priority commented 2 years ago
thanks for the reply @Michał Duszak, I have another question then: how can I clear the selected date via javascript? I have a case where I need to empty programmatically the date inputs to clean a form. When I set their values to "", I see in the html input elements that the value is set to nothing but still the input displays the previously selected date and more annoying at form submission the formerly selected date is still sent. I need a way to clear properly the date picker via JS so that no value appears anymore and no value is sent when submitting the form An additional point: when I reset the value to '' in JS, I also perform a dispose of the date picker instance and create a new one, but still the input keeps the selected date
Michał Duszak staff commented 2 years ago
We have to workaround and think of something that update() would do in this case. Try setting an instance private member _activeDate to null also. mdb.Datepicker.getInstance(datepickerEl)._activeDate = null
Does this work for you?
Boutrois priority commented 2 years ago
thanks for the message, I tried both _activeDate and _selectedDate to null, it actually sets these values to null but still the input field contains the previously selected date value
Michał Duszak staff commented 2 years ago
Dont forget to set input values to "" like before
Boutrois priority commented 2 years ago
yes this is what I do but still no impact, the input field remains full with the date
Michał Duszak staff commented 2 years ago
What element are you setting value to? input element? or the datepicker instance element?