const picker = new tempusdominus.TempusDominus(document.getElementById('datetimepicker1'));
picker.viewDate
returns the pickers current view date.
There are a number of function here that allow for retrieving the selected dates or adding to them.
Returns an array of DateTime
of the selected date(s).
Returns the last picked DateTime
of the selected date(s).
Returns the length of picked dates -1 or 0 if none are selected.
Adds a new DateTime to selected dates array. Use this function with caution. It will not automatically refresh the widget or do any validation.
Tries to convert the provided value to a DateTime object. If value is null|undefined then clear the value of the provided index (or 0).
Returns true if the target date is part of the selected dates array. If unit is provided then a granularity to that unit will be used.
Returns the index at which target date is in the array. This is used for updating or removing a date when multi-date is used. If unit is provided then a granularity to that unit will be used.
Clears all selected dates.
Emits Namespace.Events.change
with the last picked date.
In previous version there was a function to read/write to each of the provided options. This made it easy to use
but made the code bulky and harder to maintain. updateOptions
replaces those functions and takes an
object of new options. This allows for multiple options to be set at the same time and works the same way as when
setting up the picker.
If the optional reset
flag is provided then new options will be merged with the default values.
Shows or hides the widget
Namespace.Events.hide
- if the widget is hidden after the toggle call
Namespace.Events.show
- if the widget is show after the toggle call
Namespace.Events.change
- if the widget is opened for the first time and the input element
is
empty and options.useCurrent != false
Shows the widget
Namespace.Events.show
- if the widget was hidden before that call
Namespace.Events.change
- if the widget is opened for the first time and the
useCurrent
is set to true or to a granularity value and the input element the component is
attached to has an empty value
Hides the widget
Namespace.Events.hide
- if the widget was visible before that callDestroys the widget and removes all attached event listeners. If the picker is open it will be hidden and the event fired.
Disables the input element and the component is attached to, by adding a disabled="true"
attribute
to
it. If the widget was visible before that call it is hidden.
Namespace.Events.hide
- if the widget was visible before this callEnables the input element and the component is attached to, by removing disabled
attribute from it.
Clears all selected dates. This is a short cut to picker.dates.clear()
Instead of adding event listeners to the pickers element, you can use the subscribe method. You can provide a single event to listen for or an array of events. When providing an array the number of callbacks must be the same as the number of events.
The subscribe method returns an unsubscribe method or an array of methods if multiple events are provided. Calling
unsubscribe remove the callback from the event listeners. Unsubscribing will not prevent
addEventListener()
from working.
const subscription = picker.subscribe(tempusdominus.Namespace.Events.change, (e) => {
console.log(e);
});
// event listener can be unsubscribed to:
subscription.unsubscribe();
//you can also provide multiple events:
const subscriptions = picker.subscribe(
[tempusdominus.Namespace.Events.show,tempusdominus.Namespace.Events.hide],
[(e)=> console.log(e), (e) => console.log(e)]
)