DataTables logo
≡

imask

Display user input in a given format

This plug-in displays user input data passed through a masking filter - i.e. it reformats the user input into an attractive format. This is done by the IMask library which has a wide variety of configuration options.

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.imask.mjs';

Example

new DataTable.Editor( {
     "ajax": "/api/staff",
     "table": "#staff",
     "fields": [ {
            label: "Extension:",
            name: "extn",
            type: 'imask',
            mask: '000000'
        },
        {
            label: 'Start date:',
            name: 'start_date',
            type: 'imask',
            maskOptions: {
                mask: Date,
                autofix: true,
                blocks: {
                    d: {mask: IMask.MaskedRange, placeholderChar: 'd', from: 1, to: 31, maxLength: 2},
                    m: {mask: IMask.MaskedRange, placeholderChar: 'm', from: 1, to: 12, maxLength: 2},
                    Y: {mask: IMask.MaskedRange, placeholderChar: 'y', from: 1900, to: 2999, maxLength: 4}
                },
                lazy: false
            }
        },
        {
            label: 'Salary:',
            name: 'salary',
            type: 'imask',
            maskOptions: {
                mask: Number,
                thousandsSeparator: "'",
            }
        }
 ]
} );

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!