DateColumn

A column that displays a date in the specified format. By default L format is used, which contains the following info: full year, 2-digit month, and 2-digit day. Depending on the browser locale, the formatted date might look different. Intl.DateTimeFormat API is used to format the date. Here is an example of possible outputs depending on the browser locale:

// These options represent `L` format
const options = { year : 'numeric', month : '2-digit', day : '2-digit' };

new Intl.DateTimeFormat('en-US', options).format(new Date(2021, 6, 1)); // "07/01/2021"
new Intl.DateTimeFormat('ru-RU', options).format(new Date(2021, 6, 1)); // "01.07.2021"

// Formatting using Bryntum API
LocaleManager.applyLocale('En');
DateHelper.format(new Date(2021, 6, 1), 'L'); // "07/01/2021"
LocaleManager.applyLocale('Ru');
DateHelper.format(new Date(2021, 6, 1), 'L'); // "01.07.2021"

To learn more about available formats check out DateHelper docs.

The field this column reads data from should be a type of date.

Default editor is a DateField.

new Grid({
    columns : [
         { type: 'date', text: 'Start date', format: 'YYYY-MM-DD', field: 'start' }
    ]
});

Date column

//<code-header>
fiddle.title = 'Date column';
//</code-header>
// grid with DateColumn
const grid = new Grid({
    appendTo   : targetElement,
    // makes grid as high as it needs to be to fit rows
    autoHeight : true,
    data       : DataGenerator.generateData(5),
    columns    : [
        { field : 'name', text : 'Name', flex : 1 },
        { type : 'date', field : 'start', text : 'DateColumn', format : 'YYYY-MM-DD', flex : 1 }
    ]
});

Configs

Common

field: StringAlso a property

The name of the data model date field to read data from.

format: String | null= LAlso a property

Date format to convert a given date object into a string to display. By default L format is used, which contains the following info: full year, 2-digit month, and 2-digit day. Depending on the browser locale, the formatted date might look different. Intl.DateTimeFormat API is used to format the date. Here is an example of possible outputs depending on the browser locale:

// These options represent `L` format
const options = { year : 'numeric', month : '2-digit', day : '2-digit' };

new Intl.DateTimeFormat('en-US', options).format(new Date(2021, 6, 1)); // "07/01/2021"
new Intl.DateTimeFormat('ru-RU', options).format(new Date(2021, 6, 1)); // "01.07.2021"

// Formatting using Bryntum API
LocaleManager.applyLocale('En');
DateHelper.format(new Date(2021, 6, 1), 'L'); // "07/01/2021"
LocaleManager.applyLocale('Ru');
DateHelper.format(new Date(2021, 6, 1), 'L'); // "01.07.2021"

To learn more about available formats check out DateHelper docs.

Note, the field this column reads data from should be a type of date.

step: String | Number | DurationConfig= 1Also a property

Time increment duration value to apply when clicking the left / right trigger icons. See step for more information Set to null to hide the step triggers.

autoHeightColumn

autoWidthColumn

fitModeColumn

flexColumn

listenersEvents

maxWidthColumn

textColumn

widthColumn

Other

max: String | DateAlso a property

Max value for the cell editor

min: String | DateAlso a property

Min value for the cell editor

catchEventHandlerExceptionsEvents

formulaColumn

pinnedColumn

pinnedWidthColumn

readOnlyColumn

Rendering

renderer: functionAlso a property

Renderer function, used to style the date displayed in the cell. Can also affect other aspects of the cell, such as styling.

You should never modify any records inside this method.

new Grid({
    columns : [
        { type : 'date', text : 'Date of birth', field : 'dob' },
    ]
});

You can modify the row element too from inside a renderer to add custom CSS classes:

new Grid({
    columns : [
        {
            type : 'date',
            text : 'Date of birth',
            field : 'dob',
            renderer : ({ record, row }) => {
               // Add special CSS class to new rows that have not yet been saved
              row.cls.newRow = record.isPhantom;

              return record.dob;
        }
    ]
});

Parameter	Type	Description
`renderData`	Object	Object containing renderer parameters
`renderData.cellElement`	HTMLElement	Cell element, for adding CSS classes, styling etc. Can be `null` in case of export
`renderData.value`	Date \| null \| undefined	The Date value to be displayed in the cell
`renderData.record`	Model	Record for the row
`renderData.column`	Column	This column
`renderData.grid`	Grid	This grid
`renderData.row`	Row	Row object. Can be null in case of export. Use the row's API to manipulate CSS class names.
`renderData.size`	Object	Set `size.height` to specify the desired row height for the current row. Largest specified height is used, falling back to configured rowHeight in case none is specified. Can be null in case of export
`renderData.size.height`	Number	Set this to request a certain row height
`renderData.size.configuredHeight`	Number	Row height that will be used if none is requested
`renderData.isExport`	Boolean	`true` if the record is being exported to Excel or a textual format, enabling special handling during export.
`renderData.isMeasuring`	Boolean	True if the column is being measured for a `resizeToFitContent` call. In which case an advanced renderer might need to take different actions.

Returns: String | DomConfig | DomConfig[] | null

afterRenderCellColumn

cellClsColumn

clsColumn

groupRendererColumn

headerRendererColumn

iconColumn

tooltipColumn

tooltipRendererColumn

Accessibility

ariaLabelColumn

cellAriaLabelColumn

Export

exportableColumn

exportedTypeColumn

Integration

vueColumn

Interaction

cellEditorColumn

collapsedColumn

collapseModeColumn

collapsibleColumn

draggableColumn

editorColumn

filterableColumn

finalizeCellEditColumn

groupableColumn

hideableColumn

invalidActionColumn

managedCellEditingColumn

resizableColumn

revertOnEscapeColumn

sealedColumn

searchableColumn

sortableColumn

toggleAllHiddenColumn

Layout

alignColumn

hiddenColumn

lockedColumn

minWidthColumn

regionColumn

Merge cells

mergeableColumn

mergeCellsColumn

mergedRendererColumn

Misc

alwaysClearCellColumn

autoSyncHtmlColumn

bubbleEventsEvents

callOnFunctionsEvents

editTargetSelectorColumn

filterTypeColumn

headerWidgetsColumn

headerWritingModeColumn

htmlEncodeColumn

htmlEncodeHeaderTextColumn

instantUpdateColumn

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

responsiveLevelsColumn

tagsColumn

touchConfigColumn

treeColumn

Summary

sumColumn

summariesColumn

summaryRendererColumn

Properties

154

Common

field: StringAlso a config

The name of the data model date field to read data from.

format: String | null= LAlso a config

// These options represent `L` format
const options = { year : 'numeric', month : '2-digit', day : '2-digit' };

new Intl.DateTimeFormat('en-US', options).format(new Date(2021, 6, 1)); // "07/01/2021"
new Intl.DateTimeFormat('ru-RU', options).format(new Date(2021, 6, 1)); // "01.07.2021"

// Formatting using Bryntum API
LocaleManager.applyLocale('En');
DateHelper.format(new Date(2021, 6, 1), 'L'); // "07/01/2021"
LocaleManager.applyLocale('Ru');
DateHelper.format(new Date(2021, 6, 1), 'L'); // "01.07.2021"

To learn more about available formats check out DateHelper docs.

Note, the field this column reads data from should be a type of date.

step: String | Number | DurationConfig= 1Also a config

Time increment duration value to apply when clicking the left / right trigger icons. See step for more information Set to null to hide the step triggers.

autoHeightColumn

autoWidthColumn

fitModeColumn

flexColumn

maxWidthColumn

textColumn

widthColumn

Class hierarchy

isDateColumn: Boolean= truereadonly

Identifies an object as an instance of DateColumn class, or subclass thereof.

isDateColumn: Boolean= truereadonlystatic

Identifies an object as an instance of DateColumn class, or subclass thereof.

isColumnColumn

isEventsEvents

isLocalizableLocalizable

isModelModel

isModelLinkModelLink

isModelStmModelStm

isTreeNodeTreeNode

Other

max: String | DateAlso a config

Max value for the cell editor

min: String | DateAlso a config

Min value for the cell editor

$namestaticModel

catchEventHandlerExceptionsEvents

contentElementColumn

defaultsColumn

elementColumn

formulaColumn

gridColumn

isPersistableModel

pinnedColumn

pinnedWidthColumn

readOnlyColumn

relationsstaticModel

subGridColumn

textElementColumn

textWrapperColumn

typestaticColumn

visibleColumn

Rendering

renderer: functionAlso a config

Renderer function, used to style the date displayed in the cell. Can also affect other aspects of the cell, such as styling.

You should never modify any records inside this method.

new Grid({
    columns : [
        { type : 'date', text : 'Date of birth', field : 'dob' },
    ]
});

You can modify the row element too from inside a renderer to add custom CSS classes:

new Grid({
    columns : [
        {
            type : 'date',
            text : 'Date of birth',
            field : 'dob',
            renderer : ({ record, row }) => {
               // Add special CSS class to new rows that have not yet been saved
              row.cls.newRow = record.isPhantom;

              return record.dob;
        }
    ]
});

Parameter	Type	Description
`renderData`	Object	Object containing renderer parameters
`renderData.cellElement`	HTMLElement	Cell element, for adding CSS classes, styling etc. Can be `null` in case of export
`renderData.value`	Date \| null \| undefined	The Date value to be displayed in the cell
`renderData.record`	Model	Record for the row
`renderData.column`	Column	This column
`renderData.grid`	Grid	This grid
`renderData.row`	Row	Row object. Can be null in case of export. Use the row's API to manipulate CSS class names.
`renderData.size`	Object	Set `size.height` to specify the desired row height for the current row. Largest specified height is used, falling back to configured rowHeight in case none is specified. Can be null in case of export
`renderData.size.height`	Number	Set this to request a certain row height
`renderData.size.configuredHeight`	Number	Row height that will be used if none is requested
`renderData.isExport`	Boolean	`true` if the record is being exported to Excel or a textual format, enabling special handling during export.
`renderData.isMeasuring`	Boolean	True if the column is being measured for a `resizeToFitContent` call. In which case an advanced renderer might need to take different actions.