Functions
const picker = new tempusdominus.TempusDominus(document.getElementById('datetimepicker1'));
Dates
Getting the View Date
picker.viewDate
returns the pickers current view date.
picker.dates
There are a number of function here that allow for retrieving the selected dates or adding to them.
picked
Returns an array of DateTime
of the selected date(s).
lastPicked
Returns the last picked DateTime
of the selected date(s).
lastPickedIndex
Returns the length of picked dates -1 or 0 if none are selected.
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.
setValue(value: DateTime, index?: number)
Sets the select date index (or the first, if not provided) to the provided DateTime object.
formatInput(value: DateTime): string
Formats a DateTime object to a string. Used when setting the input value. It is possible to overwrite this to provide more complex formatting with moment/dayjs or by hand.
parseInput(value:any): DateTime
Parse the value into a DateTime object. This can be overwritten to supply your own parsing.
setFromInput(value: any, index?: number)
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). It is possible to overwrite this to provide more complex formatting with moment/dayjs or by hand.
isPicked(DateTime, Unit?)
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.
pickedIndex(DateTime, Unit?)
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.
clear
Clears all selected dates.
Emits Namespace.events.change
with the last picked date.
updateOptions(object, boolean?)
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.
Display
toggle
Shows or hides the widget
Emits
-
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 andoptions.useCurrent != false
show
Shows the widget
Emits
-
Namespace.events.show
- if the widget was hidden before that call -
Namespace.events.change
- if the widget is opened for the first time and theuseCurrent
is set to true or to a granularity value and the input element the component is attached to has an empty value
hide
Hides the widget
Emits
Namespace.events.hide
- if the widget was visible before that call
paint(Unit | 'decade', DateTime, string[], HTMLElement)
Allows developers to add/remove classes from an element. During the grid generation code, this function is called.
It provides the unit that is being generated (i.e. displaying the main date view), the date time object being effected, the current set of css classes and the container element.
Check out the example paint plugin.
dispose
Destroys the widget and removes all attached event listeners. If the picker is open it will be hidden and the event fired.
disable
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.
Emits
Namespace.events.hide
- if the widget was visible before this call
enable
Enables the input element and the component is attached to, by removing disabled
attribute from
it.
clear
Clears all selected dates. This is a short cut to picker.dates.clear()
subscribe(event | events[], callback | callbacks[])
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)]
)