Topic: v5 datepicker programtically set min and max

Boutrois priority asked 2 years ago

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.)

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?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • 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