DataTables logo
≡

Bootstrap DatePicker

Date picker control which is tightly integrated with Bootstrap for styling.

  • Requires: Bootstrap DatePicker

Date pickers in Editor, Bootstrap style. This plug-in provides integration between Bootstrap DatePicker control and Editor, replacing the build in date field type in Editor (which is jQuery UI based).

Please note that this plug-in was published, Editor now has a built-in datetime field type which can be used with full integration for the published server-side libraries. It is recommended that you use the new built-in field type in preference to this field type, particularly for new projects.

Use

This plug-in can be obtained and used in multiple different ways.

Browser

This plug-in is available on the DataTables CDN:

JS

The plug-in will then automatically register itself against a global DataTables instance. This file can also be used if you are using an AMD loader such as Require.js.

Note that if you are using multiple plug-ins, it can be beneficial in terms of performance to combine the plug-ins into a single file and host it on your own server, rather than making multiple requests to the DataTables CDN.

NPM

The plug-ins are all available on NPM (which can also be used with Yarn or any other Javascript package manager) as part of the datatables.net-plugins package. To use this plug-in, first install the plug-ins package:

npm install datatables.net-plugins

Then import datatables.net, any other DataTables extensions you need, plus the plug-in:

import DataTable from 'datatables.net';
import 'datatables.net-plugins/editorFields/editor.bootstrapDate.mjs';

Example

new DataTable.Editor( {
"ajax": "php/dates.php",
"table": "#example",
"fields": [ {
       "label": "First name:",
       "name": "first_name"
   }, {
       "label": "Last name:",
       "name": "last_name"
   }, {
       "label": "Updated date:",
       "name": "updated_date",
       "type": "date",
       "opts": {
           showOn: 'focus',
           format: 'yyyy-mm-dd'
       }
   }, {
       "label": "Registered date:",
       "name": "registered_date",
       "type": "date",
       "opts": {
           format: 'D, d M yy'
       }
   }
]
} );

Version control

If you have any ideas for how this plug-in can be improved, or spot anything that is in error, it is available on GitHub and pull requests are very welcome!