Plugins

On this page

Introduction

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
    logger(a);
  }

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

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

Using a plugin

Globally

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

<script src="/path/to/plugin.js"></script>
tempusDominus.extend(window.tempusDominus.plugins.PLUGINNAME);

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
    .TempusDominus(document.getElementById('datetimepicker1'));

picker.extend(sample);

Per Instance Overwrites

It is possible to overwrite specific functions per picker instances as well. 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.