Search code examples
javascripttempus-dominus-datetimepicker

How can I refresh widget programically?


I'm using tempus dominus v6 inline datepicker. I use add function to add selected multiple dates. Once the widget is loaded, dates are not selected until I manually select any date. After that you can see all added dates.

Im using this function:

add(DateTime) Adds a new DateTime to selected dates array. Use this function with caution. It will not automatically refresh the widget or do any validation.

Question is how can i refresh widget after add dates? Thanks for help.

I would like the added dates to be immediately visible after loading the widget.


Solution

  • Judging by their docs I would avoid using add(DateTime), since it does not emit events and there aren't any "refresh" or "update" methods you can call afterwards to sync the state.

    Instead you can use the setValue(DateTime, index) method, and just pass an index that will append the new value to the end of the array.

    picker.dates.setValue(date, picker.dates.picked.length);
    

    Note: I'm specifically not using picker.lastPickedIndex + 1 for the index, because according to their docs lastPickedIndex "Returns the length of picked dates -1, or 0 if none are selected". Which means it will return 0 if there are either 0 or 1 dates selected, which is a pretty bizarre implementation to be honest.