searchDateTime

Since: ColumnControl 1.0.0

Search for date based columns.
Please note - this property requires the ColumnControl extension for DataTables.

Description

This content type adds a search input suitable for use with date-based columns. An input element is added to the ColumnControl content list, and the list of logic options for how the search should perform its tests are also suitable for date-based data.

If the DataTables DateTime picker library is available on your page, focusing on the input will cause a date picker to appear.

The format of the date input will match the format used in the column if using the builder in datetime rendering function.

It should be noted that search should generally be used rather than this one directly, as search will select the most appropriate search input based on the column type.

Examples showing the use of this content type are available on the DataTables website.

Display

It is expected that this content type will have a full cell to draw in if used at the top level, as it benefits from having a large amount of space available (i.e. other buttons won't be used along with it at the top level for a specific set of cells).

In a dropdown, this content type will display as part of the regular content list.

Options

This button can have the following options set in its configuration object to customise its actions and display, in addition to those options which are available for all buttons (e.g. buttons.buttons.text):

`clear`

Type: boolean
Default: true

Indicate if a clear icon should be shown at the end of the search input element. When enabled a cross icon will be shown when the input has a value and clicking on the icon will clear the search.

`format`

Type: string
Default: ``
Since: 1.1.0

This option gives the ability to use a different format for the search input, than that used in the DataTable for the column in question. ColumnControl will attempt to use the same format as the DataTable column automatically, but you may wish to override this, particularly if using the mask option.

`mask`

Type: string
Default: ``
Since: 1.1.0

Date filtering mask. This option is used to remove components from the date / time data used for filtering and is applied to both the search input and the data in the table. A "component" in this sense is the year, month, day, hours, minutes or seconds.

This can be useful for cases where you might wish to offer the user the ability to search a date / time value by just the date part, simplifying the search, as for a full date / time exact matching would require second precision.

The format for this value is "YYYY-MM-DD[T ]hh:mm:ss.sss". Remove a component to remove it from the comparison (that unit will be set to 0). E.g. format: 'YYYY-MM-DD' will search only on the date part.

The format of this field does not change based on the format parameter, it is always in the format described above, but you will likely wish to set format if you also use this one.

`placeholder`

Type: string
Default: ``

Value to set the placeholder attribute of the input element to. The given string will have the substring [title] will be replaced with the column title.

`title`

Type: string
Default: ``

Text shown above the input, which can be used to tell the end user information about what the search will do. The given string will have the substring [title] will be replaced with the column title.

`titleAttr`

Type: string
Default: ``

Value to set the title attribute of the search input element which can be used to help with accessability. The given string will have the substring [title] will be replaced with the column title.

Example

Manual application of search types (use search to simplify!):

new DataTable('#example', {
    columnControl: [
        {
            target: 0,
            content: ['orderStatus']
        },
        {
            target: 1,
            content: ['searchText']
        }
    ],
    columnDefs: [
        {
            targets: [3, 5],
            columnControl: {
                target: 1,
                content: ['searchNumber']
            }
        },
        {
            targets: [4],
            columnControl: {
                target: 1,
                content: ['searchDateTime']
            }
        }
    ],
    ordering: {
        indicators: false
    }
});