Vue 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 Copy Link

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 Copy Link

Enabling Date as String Cell Editor Copy Link

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' (or 'YYYY-MM-DDTHH:mm:ss' for dateTimeString).

Enabled with agDateStringCellEditor and configured with IDateStringCellEditorParams.

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

API Reference Copy Link

Next Up Copy Link

Continue to the next section: Checkbox Cell Editor.