React Data GridDate Cell Editors

Two date cell editors are provided - agDateCellEditor for cell values provided as Date, and agDateStringCellEditor for date values provided as String.

Enabling Date Cell Editor

Edit any of the cells in the grid below to see the Date Cell Editor.

The Date Cell Editor is a simple date editor that uses the standard HTML date input and requires cell values to be of type Date.

Enabled with agDateCellEditor and configured with IDateCellEditorParams.

columnDefs: [
    {
        cellEditor: 'agDateCellEditor',
        cellEditorParams: {
            min: '2000-01-01',
            min: '2019-12-31',
        }
        // ...other props
    }
]

API Reference

Properties available on the IDateCellEditorParams<TData = any, TContext = any> interface.

min
string | Date
Min allowed value. Either Date object or string in format 'yyyy-mm-dd'.
max
string | Date
Max allowed value. Either Date object or string in format 'yyyy-mm-dd'.
step
number
Size of the value change when stepping up/down, starting from min or the initial value if provided. Step is also the difference between valid values. If the user-provided value isn't a multiple of the step value from the starting value, it will be considered invalid. Defaults to any value allowed.

Enabling Date as String Cell Editor

Edit any of the cells in the grid below to see the Date as String Cell Editor.

The Date as String Cell Editor is a simple date editor that uses the standard HTML date input. It's similar to the Date Cell Editor, but works off of cell values with type String.

The date format is controlled via Cell Data Types and the Date as String Data Type Definition. The default is 'yyyy-mm-dd'.

Enabled with agDateStringCellEditor and configured with IDateStringCellEditorParams.

columnDefs: [
    {
        cellEditor: 'agDateStringCellEditor',
        cellEditorParams: {
            min: '2000-01-01',
            min: '2019-12-31',
        }
        // ...other props
    }
]

API Reference

Properties available on the IDateStringCellEditorParams<TData = any, TContext = any> interface.

min
string | Date
Min allowed value. Either Date object or string in format 'yyyy-mm-dd'.
max
string | Date
Max allowed value. Either Date object or string in format 'yyyy-mm-dd'.
step
number
Size of the value change when stepping up/down, starting from min or the initial value if provided. Step is also the difference between valid values. If the user-provided value isn't a multiple of the step value from the starting value, it will be considered invalid. Defaults to any value allowed.

Next Up

Continue to the next section: Checkbox Cell Editor.