Topic: How to reset a Datetimepicker
Expected behavior I'm looking for a way to reset a DateTimePicker through Javascript, such that both the selected value and the internally stored selected day/month/year/hour/minute values are reset to their standard value.
Actual behavior
It doesn't appear like there is a built-in method to do this, and while the _datepicker object does have a handleClear() function, I've seen reports of some people getting errors when using this function. And the _timepicker object doesn't have that method, so that only partially helps me.
Resources (screenshots, code snippets etc.)
resetDateTimePicker = function(/*String*/ inputId, defaultValue = null) {
let dateTimePicker = document.getElementById(inputId);
let dateTimePickerInstance = Datetimepicker.getInstance(dateTimePicker);
dateTimePickerInstance._datepicker.handleClear();
dateTimePickerInstance.update();
setInputActive(inputId);
};
The easiest way is to set a new value to inpur. It is focused after that, so depending on what you need, you may also blur it afterwards.
https://mdbootstrap.com/snippets/standard/kpienkowska/6453453
ikan_nak pro premium priority commented 5 days ago
That changes the value of the input, but as far as I know, that doesn't actually change the selected date and time, and when you then open the input and close it again without selecting anything (even through the cancel button), it selects the previously selected value again. You can try that on your own snippet: click the calendar when it's empty, then click the cancel button, and you'll see it selects the originally selected date again.
Kamila Pieńkowska staff commented 5 days ago
I've updated the snippet.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 8.1.0
- Device: Desktop computer
- Browser: Edge
- OS: Windows 11
- Provided sample code: No
- Provided link: No