DateTime Standalone

DateTime is DataTables' own DateTime picker, which we mainly use within Editor and SearchBuilder extensions to provide a user friendly way to select values for dates and times. It is freely available under the MIT license if you wish to use it in some other capacity or as part of a custom extension for DataTables.

As well as standard JS Date formats, DateTime provides full integration with Moment, Luxon and Dayjs.

Installation

There are number of different ways to include the DateTime library in your page / project.

Browser

The easiest way to get and use DateTime is to use the DataTables download builder where you can select the software that you wish to use on your page and have a single Javascript and CSS file created and hosted for you. You will need to make sure that you include this when using both the SearchBuilder package and Editor.

Alternatively, the individual files can be included on your page, a release package downloaded or the source control repository cloned on GitHub.

NPM

The DateTime library is available on NPM as datatables.net-datetime. Use your package manager (e.g. NPM, Yarn or similar) to install:

npm install --save datatables.net-datetime

ES modules

To use the library in an ES module project simply import it:

import DateTime from 'datatables.net-datetime';

CommonJS

If your project uses CommonJS loaders, then just like DataTables core and its other extensions, DateTime exports a function which can be optionally passed a window and jQuery object, or it will resolve them automatically itself:

const DateTime = require('datatables.net-datetime')();

// or
const DateTime = require('datatables.net-datetime')(window, jQuery);

Initialisation

If you include the DateTime extension on your page, it is automatically available for every DataTable and extension on that page. The extensions that make use of DateTime initialise it themselves, so there is no need to worry about that. It is of course possible to initialise a DateTime instance outside of DataTables. To do this simply create a new instance of DateTime, passing in the target input element.

new DateTime(document.getElementById('myInput'));

It is also possible to initialise DateTime via jQuery:

$('#myInput').dtDateTime();

Configuration options are set by passing in a second argument (or a first if initialising using jQuery style), an object full of the options that are to be set. Full documentation is available for these.

new DateTime(document.getElementById('test'), {
    locale: 'fr'
});

There are also a variety of API methods that are available. They are documented here and an example of their use is included below.

var dt = new DateTime(document.getElementById('example'));
dt.val("2021-12-31");

To make use of Moment, Luxon or Dayjs the only initialisation that is required is to include them on the page. Doing this will then allow formats other than ISO8601 to be used. Examples using these libraries are available here for Moment, Luxon and Dayjs.

Features

DateTime adds the following features:

• Easy Date and Time selection
• Fully customisable date formats
• Fully customisable locale
• Fully internationalisable