Topic: How to reset a Datetimepicker

ikan_nak priority asked 5 days ago


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

};


Kamila Pieńkowska staff answered 4 days ago


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 priority commented 4 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 4 days ago

I've updated the snippet.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • 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