Skip to main content Skip to docs navigation

Functions

For the sake of the following documentation, assume there's a picker setup like this: 
  
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 and options.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 the useCurrent 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)]
)