Skip to main content Skip to docs navigation


On this page


Plugins allow you to extend the picker by adding new functionality to either Tempus Dominus globally, a single picker or by overwriting 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 import the plugins instead.

import { TempusDominus, version, extend } from '@eonasdan/tempus-dominus'; //require also works
import sample from '@eonasdan/tempus-dominus/dist/plugins/examples/sample';

extend(sample); // use plugin

Per instance

Plugins can also be loaded per picker.

const picker = new tempusdominus


Per Instance Overwrites

It is possible to overwrite specific functions per picker instances as well. For instance:

const td = new tempusDominus

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.