Skip to content
ZenGrid

Date Editors

Community

Introduction

Section titled “Introduction”

ZenGrid edits dates in two layers:

  • Built-in date editor (Community). Set editor: 'date' on an editable column for a calendar-popup date picker (or the native browser control). Configure it declaratively through editorOptions — format, type, minDate, maxDate, required, useCalendarPopup, placeholder, and a custom validator. No license needed.
  • Formatted date column (Enterprise). dateEditor() returns a ready-made column that wires the same calendar editor and formats the cell display with the same format — so a column reads and edits as 15 Mar 2024 in one call. It adds a disabledDates rule (block weekends, holidays, …) on top of the built-in minDate/maxDate bounds.

Dates are read and written as JavaScript Date values. Store your cell values as timestamps (or Dates) and render them with core’s re-exported zg.DateRenderer so the display, the popup, and validation all agree.

Built-in date editor (Community)

Section titled “Built-in date editor (Community)”

Select it on any editable column:

const grid = new Zengrid(mount, {
  columns: [
    { field: 'joined', header: 'Joined', editable: true, editor: 'date',
      editorOptions: { format: 'DD MMM YYYY', minDate: '2020-01-01' },
      renderer: new zg.DateRenderer({ format: 'DD MMM YYYY' }) },
  ],
});

editorOptions

Section titled “editorOptions”
Option Type Purpose
format string Display/parse format in the calendar input (default 'DD/MM/YYYY'). Tokens: YYYY/YY/MMMM/MMM/MM/M/DD/D (+ time).
type 'date' | 'datetime-local' | 'time' Native input kind when useCalendarPopup: false (default 'date').
minDate Date | string Earliest selectable date.
maxDate Date | string Latest selectable date.
useCalendarPopup boolean Calendar popup (default true) or the native browser picker (false).
required boolean Reject an empty value on commit.
placeholder string Placeholder shown when empty.
validator (value: Date | null) => boolean | string Custom check run after the required/range checks; return a string to supply the error message.

A failing required / range / validator commit is governed by the grid-level editing.invalidEditMode: 'block' (default) keeps the editor open and flags the cell.

Joined uses editor:'date' with format:'DD MMM YYYY'. Double-click a Joined cell — the calendar popup opens; pick a date and it commits. The cell renders via zg.DateRenderer with the same format. Change format to 'YYYY-MM-DD' and re-run.

Formatted date column (Enterprise)

Section titled “Formatted date column (Enterprise)”
Enterprise

dateEditor() returns a ColumnDef — drop it straight into columns. It wires the calendar editor and, by default, formats the cell display with the same format, so you don’t hand-wire a renderer:

import { dateEditor } from '@zengrid/enterprise';


const grid = new Zengrid(mount, {
  columns: [
    dateEditor({ field: 'joined', header: 'Joined',
      format: 'DD MMM YYYY', minDate: '2020-01-01',
      disabledDates: (d) => d.getDay() === 0 || d.getDay() === 6 }),
  ],
});

Options

Section titled “Options”

Everything from the built-in editor (format/type/minDate/maxDate/ useCalendarPopup/required/placeholder/validator) plus:

Option Type Purpose
disabledDates (value: Date) => boolean Return true for a date that is not selectable (weekends, holidays…). Rejected on commit, before validator.
formatDisplay boolean Also format the cell display with format (default true; false keeps your own renderer or the raw value).

dateEditor() gives a formatted display + calendar editor in one call — no separate renderer. Joined cells read '15 Mar 2021'; double-click one, pick a date, and it re-renders in the same format. It stores a Date.

Next

Section titled “Next”