FreeGridv1.15.1English

기간 편집기

두 달을 나란히 보여 주는 기간 편집기: 시작일과 종료일을 누르거나 최근 7일 같은 빠른 선택을 쓰고, 값은 텍스트·배열·{ start, end } 모양을 유지합니다.

실행 예제기간 편집기

두 달 달력, 빠른 선택, 세 가지 값 모양.

이 데모의 코드
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' }는 한 셀에서 기간을 편집합니다. 두 달을 나란히 보여 주고, 첫 클릭이 시작일, 두 번째 클릭이 종료일이 되며 바로 저장됩니다. 종료일을 고르기 전에는 마우스를 움직이는 대로 만들어질 기간이 미리 보입니다. 왼쪽의 빠른 선택(오늘, 최근 7일, 최근 30일, 이번 달, 지난달, 올해)은 한 번에 저장됩니다.

기본 사용

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

값 모양

편집기는 셀이 원래 가진 모양을 유지하므로 지금 데이터 구조에 그대로 맞습니다.

원래 값저장 모양
글자 '2026-03-01 ~ 2026-03-31'(또는 빈 값)구분자가 든 글자(기본 ' ~ ')
배열 ['2026-03-01', '2026-03-31']날짜 두 개의 배열
객체 { start, end }(또는 { from, to })같은 객체의 start·end만 바꿈(다른 필드는 유지)
배열·객체 안의 DateDate로 다시 저장

옵션

이름타입설명
separatorstring텍스트 값에서 두 날짜 사이 구분자(기본 ' ~ '). 입력할 때는 공백 유무와 상관없이 ~, –, —도 받습니다.
presetsboolean | { label, range: () => [day, day] }[]왼쪽 빠른 선택. false면 숨기고, 목록을 주면 바꿉니다(range는 편집기를 열 때마다 계산).
min / max / disabledDates / weekStart날짜 편집기와 같습니다. 고를 수 없는 날은 흐리게 보이고, 그런 날이 들어간 입력·붙여넣기는 거부됩니다.
{ 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)] },
  ],
} }

기간 입력과 붙여넣기

  • 입력칸에 2026-03-01 ~ 2026-03-31처럼 씁니다. 순서를 거꾸로 써도 앞뒤를 맞춰 줍니다.
  • 엑셀에서 같은 글자를 붙여넣을 수 있고, 날짜가 하나뿐이거나 날짜가 아닌 글자는 건너뜁니다.
  • 지우기를 누르면 셀이 비워집니다(null, 배열 셀은 빈 배열).

기간 필터

기간 컬럼의 날짜 필터는 기간이 필터와 겹치는 행을 보여 줍니다. 같음은 그 날을 포함, 이전은 그 전에 시작, 이후는 그 뒤에 끝, 범위·상대 날짜는 조금이라도 겹치면 통과합니다. 날짜 필터를 보세요.

이 페이지에 대한 질문

한 셀에서 시작일과 종료일을 고르게 하려면?

editor: { type: 'dateRange' }를 쓰세요. 첫 클릭이 시작일, 두 번째 클릭이 종료일이 되고 값은 '2026-03-01 ~ 2026-03-31'로 저장됩니다(원래 배열·객체였으면 그 모양으로).