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' }
    ]
});

Useful configs

Config	Description
format	Date display format string
min	Minimum selectable date
max	Maximum selectable date
step	Date picker step unit and amount

Configs

Configs are options you supply in a configuration object when creating an instance of this class

field : String

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

Has a corresponding runtime field property.
format : String/nullL
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.

Has a corresponding runtime format property.
step : String/Number/DurationConfig1

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.

Has a corresponding runtime step property.
max : String/Date

Max value for the cell editor

Has a corresponding runtime max property.
min : String/Date

Min value for the cell editor

Has a corresponding runtime min property.
renderer : Function
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;
        }
    ]
});
```
When using the Bryntum React wrapper, this renderer can also return JSX elements. See renderer for a JSX example and performance considerations.
Parameters
- renderData : Object
  
  Object containing renderer parameters
- cellElement : HTMLElement
  
  Cell element, for adding CSS classes, styling etc. Can be null in case of export
- value : Date/null/undefined
  
  The Date value to be displayed in the cell
- record : Model
  
  Record for the row
- column : Column
  
  This column
- grid : Grid
  
  This grid
- row : Row
  
  Row object. Can be null in case of export. Use the row's API to manipulate CSS class names.
- 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
- height : Number
  
  Set this to request a certain row height
- configuredHeight : Number
  
  Row height that will be used if none is requested
- isExport : Boolean
  
  true if the record is being exported to Excel or a textual format, enabling special handling during export.
- 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
Has a corresponding runtime renderer property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isDateColumn : Booleantrue

READONLY

static

ADVANCED

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

field : String

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

Has a corresponding field config.
format : String/nullL
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.

Has a corresponding format config.
step : String/Number/DurationConfig1

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.

Has a corresponding step config.
max : String/Date

Max value for the cell editor

Has a corresponding max config.
min : String/Date

Min value for the cell editor

Has a corresponding min config.
isDateColumn : Booleantrue

READONLY

ADVANCED

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

renderer : Function

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;
        }
    ]
});

When using the Bryntum React wrapper, this renderer can also return JSX elements. See renderer for a JSX example and performance considerations.

Has a corresponding renderer config.

Functions

Functions are methods available for calling on the class

defaultRenderer( )

private

Renderer that displays the date with the specified format. Also adds cls 'date-cell' to the cell.
formatValue( value )
: String

private

Used by both renderer and groupRenderer to do the actual formatting of the date
groupRenderer( )

private

Group renderer that displays the date with the specified format.

DateColumn

Useful configs

See also

Configs

Parameters

Returns

Properties

Functions

Source path

Inheritance tree4

Mixins5

Contents