Skip to main content Skip to docs navigation

Plugins

Introduction

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
    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

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 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.