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.
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
DateEditorModule,
GridApi,
GridOptions,
ModuleRegistry,
ValueFormatterParams,
enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
const modules = [ClientSideRowModelModule, DateEditorModule];
const data = Array.from(Array(20).keys()).map((val: any, index: number) => ({
date: new Date(2023, 5, index + 1),
}));
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [rowData, setRowData] = useState<any[]>(data);
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{
headerName: "Date Editor",
field: "date",
valueFormatter: (params: ValueFormatterParams<any, Date>) => {
if (!params.value) {
return "";
}
const month = params.value.getMonth() + 1;
const day = params.value.getDate();
return `${params.value.getFullYear()}-${month < 10 ? "0" + month : month}-${day < 10 ? "0" + day : day}`;
},
cellEditor: "agDateCellEditor",
},
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
width: 200,
editable: true,
};
}, []);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
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',
max: '2019-12-31',
}
// ...other props
}
] API Reference Copy Link
Properties available on the IDateCellEditorParams<TData = any, TContext = any> interface.
Min allowed value. Either Date object or string in format 'yyyy-mm-dd'. |
Max allowed value. Either Date object or string in format 'yyyy-mm-dd'. |
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.
|
Defines whether time should be included when editing dates. true: Date and time will be editable. false: Only date portion will be editable. |
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.
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
DateEditorModule,
GridApi,
GridOptions,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
const modules = [ClientSideRowModelModule, DateEditorModule];
const data = Array.from(Array(20).keys()).map((val: any, index: number) => ({
dateString: `2023-06-${index < 9 ? "0" + (index + 1) : index + 1}`,
}));
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [rowData, setRowData] = useState<any[]>(data);
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{
headerName: "Date as String Editor",
field: "dateString",
cellEditor: "agDateStringCellEditor",
},
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
width: 200,
editable: true,
};
}, []);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
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',
max: '2019-12-31',
}
// ...other props
}
] API Reference Copy Link
Properties available on the IDateStringCellEditorParams<TData = any, TContext = any> interface.
Min allowed value. Either Date object or string in format 'yyyy-mm-dd'. |
Max allowed value. Either Date object or string in format 'yyyy-mm-dd'. |
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.
|
Defines whether time should be included when editing dates. true: Date and time will be editable. false: Only date portion will be editable. |