Skip to main content Skip to docs navigation



Plugins allow you to extend the picker by adding new functionality to either Tempus Dominus globally, a single picker or by overwritting existing functionality.

Creating plugins

There are a few examples in the source like this

export const load = (option, tdClasses, tdFactory) => {
  // extend the picker
  // e.g. add new tempusDominus.TempusDominus(...).someFunction()
  tdClasses.TempusDominus.prototype.someFunction = (a, logger) => {
    logger = logger || console.log

  // extend tempusDominus
  // e.g. add tempusDominus.example()
  tdFactory.example = (a, logger) => {
    logger = logger || console.log

  // overriding existing API
  // e.g. extend new tempusDominus.TempusDominus(...).show()
  const oldShow =; = function(a, logger) {
    logger = logger || console.log
    alert('from plugin');
    // return modified result

Using a plugin

Using a plugin is easy. Load the plugin script file after you load Tempus Dominus

<script src="/path/to/plugin.js"></script>

You can also use plugins in Typescript or Node.

const example = require('tempusDominus/plugins/examples/sample')
// or
import example from 'tempusDominus/plugins/examples/sample'

tempusDominus.extend(example) // use plugin

Per Picker

It is possible to use this system per picker. For instance:

const td = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));

td.dates.formatInput = function(date) { {return moment(date).format('MM/DD/YYYY') } }

The code above would affect a single picker but not globally. You could easily adapt this code to have a common formatting function taking in a format string.