Date range editor

Edit a period with two months side by side: click the first and the last day, or use presets such as the last 7 days; values stay text, arrays or { start, end } objects.

Live demoDate range editor

Two-month calendar, presets, and the three value shapes.

Code for this demo

import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

const pad = (n: number) => String(n).padStart(2, '0');
export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const data = makeRows(100).map((r, i) => {
    const m = 1 + (i % 12);
    const a = `2026-${pad(m)}-01`, b = `2026-${pad(m)}-${pad(10 + (i % 18))}`;
    return { ...r, text: `${a} ~ ${b}`, list: [a, b], obj: { start: a, end: b } };
  });
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 150 },
      { field: 'text', header: h('Text value', '텍스트 값'), width: 210, editable: true, editor: { type: 'dateRange' } },
      { field: 'list', header: h('Array value', '배열 값'), width: 210, editable: true, editor: { type: 'dateRange' } },
      { field: 'obj', header: h('{ start, end }', '{ start, end }'), width: 210, editable: true,
        editor: { type: 'dateRange', presets: [
          { label: 'Q1', range: () => ['2026-01-01', '2026-03-31'] },
          { label: 'Q2', range: () => ['2026-04-01', '2026-06-30'] },
          { label: h('Next 14 days', '앞으로 14일'), range: () => [new Date(), new Date(Date.now() + 13 * 864e5)] },
        ] } },
    ],
    data, locale: ctx.lang,
  });
  grid.on('cellValueChanged', e => ctx.log(`${e.colId} = ${JSON.stringify(e.newValue)}`));
  text(ctx, h('Double-click a period: click the first day, then the last. The value keeps its shape (see the log).',
    '기간을 더블클릭하고 시작일, 종료일을 차례로 누르세요. 값은 원래 모양을 유지합니다(로그 참고).'));
  return grid;
}

editor: { type: 'dateRange' } edits a period in one cell. Two months are shown side by side; the first click sets the start, the second the end and saves. While the end is not chosen yet, moving the pointer shows the range it would make. Presets on the left (today, last 7 days, last 30 days, this month, last month, this year) save in one click.

Basic use

createGrid(el, {
  columns: [
    { field: 'contract', header: 'Contract period', width: 220, editable: true, editor: { type: 'dateRange' } },
  ],
  data: [{ contract: '2026-03-01 ~ 2026-03-31' }],
});

Value shapes

The editor keeps the shape the cell already had, so it fits the data you have:

The cell had	Saved as
Text '2026-03-01 ~ 2026-03-31' (or blank)	Text with the separator (default ' ~ ')
An array ['2026-03-01', '2026-03-31']	An array of two days
An object { start, end } (or { from, to })	The same object with new start / end (other fields kept)
Dates inside an array or object	Dates again

Options

Name	Type	Description
`separator`	`string`	Between the two days in text values (default ' ~ '). Typing also accepts ~, – and — with or without spaces.
`presets`	`boolean \| { label, range: () => [day, day] }[]`	The quick choices on the left: false hides them; a list replaces them (each range is worked out when the picker opens).
`min / max / disabledDates / weekStart`		As in the date editor: days that cannot be picked are greyed out; a typed or pasted range that touches one is refused.

{ field: 'quarter', editable: true, editor: {
  type: 'dateRange',
  separator: ' – ',
  presets: [
    { label: 'Q1', range: () => ['2026-01-01', '2026-03-31'] },
    { label: 'Q2', range: () => ['2026-04-01', '2026-06-30'] },
    { label: 'Next 2 weeks', range: () => [new Date(), new Date(Date.now() + 13 * 864e5)] },
  ],
} }

Typing and pasting a range

Type 2026-03-01 ~ 2026-03-31 in the box; days written the other way round are put in order.
Paste the same text from Excel; a value with only one day, or text that is not a date, is skipped.
Clear empties the cell (null, or an empty array for array cells).

Filtering ranges

A date filter on a range column passes the rows whose period overlaps the filter: equals a day = the range contains it; before = starts before; after = ends after; between and relative dates = any overlap. See Date filters.

Questions about this page

How do I let users pick a start and end date in one cell?

Use editor: { type: 'dateRange' }. The first click sets the start, the second the end, and the value is saved as '2026-03-01 ~ 2026-03-31' (or an array / object if the cell had one).