Datetime Editor

Double-click a value to edit. Adjust the calendar date and time together, then press Enter in a text field or click outside to save a valid draft. Date/time ranges keep both endpoints editable until saving. Escape discards the draft. Invalid drafts remain open; read-only cells cannot open or commit an editor.

Set dateEditor.autoApply: false to keep drafts until explicit Apply and show Apply/Cancel controls. Set dateEditor.showActions: true to show those controls while retaining automatic saves; showActions: false hides them. Clear remains available for optional values.

Source code

Vue

<template>
  <p>
    Double-click to edit. Valid changes save automatically; Escape discards the
    draft.
  </p>
  <RevoGrid
    :source="source"
    :columns="columns"
    :plugins="plugins"
    :theme="isDark ? 'darkMaterial' : 'material'"
    style="height: 340px"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { currentThemeVue } from '../composables/useRandomData';
import RevoGrid from '@revolist/vue3-datagrid';
import { editorColumns, editorRows } from './editor-data';
const { isDark } = currentThemeVue();
const source = ref(editorRows());
const columns = editorColumns();
const plugins = [];
</script>

TypeScript

import { currentTheme } from '../composables/useRandomData';
import { defineCustomElements } from '@revolist/revogrid/loader';
import { editorColumns, editorRows } from './editor-data';
defineCustomElements();
export function load(parentSelector: string, rows = editorRows()) {
  const grid = document.createElement('revo-grid');
  grid.theme = currentTheme().isDark() ? 'darkMaterial' : 'material';
  grid.style.height = '340px';
  grid.columns = editorColumns();
  document.querySelector(parentSelector)?.append(grid);
  grid.source = rows;
  return () => grid.remove();
}

React

import { currentTheme } from '../composables/useRandomData';
import { useMemo } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { editorColumns, editorRows } from './editor-data';
export default function EditorDatetime({ rows }: { rows?: any[] }) {
  const columns = useMemo(editorColumns, []);
  const fallback = useMemo(editorRows, []);
  const plugins = useMemo(() => [], []);
  return (
    <>
      <p>
        Double-click to edit. Valid changes save automatically; Escape discards
        the draft.
      </p>
      <RevoGrid
        source={rows?.length ? rows : fallback}
        columns={columns}
        plugins={plugins}
        theme={currentTheme().isDark() ? 'darkMaterial' : 'material'}
        style={{ height: '340px' }}
      />
    </>
  );
}

Angular

import { currentTheme } from '../composables/useRandomData';
import { Component, ViewEncapsulation } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { editorColumns, editorRows } from './editor-data';
@Component({
  selector: 'editor-datetime-grid',
  standalone: true,
  imports: [RevoGrid],
  encapsulation: ViewEncapsulation.None,
  template: `<p>
      Double-click to edit. Valid changes save automatically; Escape discards
      the draft.
    </p>
    <revo-grid
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      [theme]="theme"
      style="height:340px"
    ></revo-grid>`,
})
export class EditorDatetimeGridComponent {
  theme = currentTheme().isDark() ? 'darkMaterial' : 'material';
  source = editorRows();
  columns = editorColumns();
  plugins = [];
}

Editor configuration

import type { ColumnRegular } from '@revolist/revogrid';
import { DateAndTimeEditor } from '@revolist/revogrid-pro';
export const editorRows = () => [
  {
    name: 'London booking',
    value: '2026-10-12T09:30:15.000Z',
    range: { from: '2026-10-12T09:00:00.000Z', to: '2026-10-15T17:30:00.000Z' },
  },
  { name: 'Optional booking', value: null, range: null },
];
export const editorColumns = (): ColumnRegular[] => [
  { prop: 'name', name: 'Booking', size: 190, readonly: true },
  {
    prop: 'value',
    name: 'Date and time · London',
    size: 290,
    editor: DateAndTimeEditor,
    dateEditor: {
      timeZone: 'Europe/London',
      precision: 'second',
      timeFormat: '24h',
      calendar: { locale: 'en-GB' },
    },
  },
  {
    prop: 'range',
    name: 'Date and time range · London',
    size: 360,
    editor: DateAndTimeEditor,
    dateEditor: {
      timeZone: 'Europe/London',
      selection: 'range',
      timeFormat: '24h',
      calendar: { numberOfMonths: 2, locale: 'en-GB' },
    },
    cellTemplate: (_h, { value }) =>
      value ? `${value.from} – ${value.to}` : '',
  },
];

The editor uses TemporalPicker from @revolist/ui/date-time, combining the original shared CalendarPicker with TimeControl. Range mode uses the same controls for both endpoints and forwards the configured calendar options.

Use DateAndTimeEditor, or DateTimeEditor with dateEditor.kind: 'datetime'. New values store ISO timestamps; ranges store { from, to } and expose independent dates and times for both endpoints.

Set timeZone to the application’s IANA zone. precision, timeFormat, timeStep, minTime and maxTime configure time entry; calendar forwards the shared calendar options. Nonexistent local times are rejected. An unchanged instant preserves its original fold and precision; newly entered repeated times use the shared earlier-instant rule. Existing Date, spreadsheet-date number and string formats remain preserved by adapters.

Gantt’s separate Start/Finish fields, inline date editors, Scheduler event/dispatch dialogs, Kanban date fields and calendar exceptions use the same control. Product adapters retain their scheduling commands and timezone policies.

Localize dateEditor.text, partial dateEditor.actions and dateEditor.calendar.translations for popup, time and calendar controls. Set the IANA timezone on dateEditor.timeZone or dateEditor.calendar.timeZone; the editor setting takes precedence for both display and commit. Date/time labels do not change stored timestamp precision.