날짜 필터와 상대 날짜

날짜를 그날·이전·이후·범위와 오늘·이번 주·이번 달·최근 N일 같은 상대 날짜로 거르고, 컬럼 메뉴와 필터 행에서 달력으로 고릅니다.

실행 예제날짜 필터

상대 날짜, 달력으로 고른 범위, 기간 컬럼.

이 데모의 코드

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');
const day = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  // dates around today, so the relative filters find something
  const data = makeRows(1000).map((r, i) => {
    const d = new Date();
    d.setDate(d.getDate() - ((i * 7) % 400) + 30);
    const end = new Date(d);
    end.setDate(end.getDate() + (i % 20));
    return { ...r, ordered: d, period: `${day(d)} ~ ${day(end)}` };
  });
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 150 },
      { field: 'ordered', header: h('Ordered', '주문일'), type: 'date', width: 140 },
      { field: 'period', header: h('Contract period', '계약 기간'), width: 220, editor: { type: 'dateRange' } },
    ],
    data, locale: ctx.lang, filterRow: true,
  });
  const count = text(ctx, '');
  const show = () => (count.textContent = h(`${grid.getDisplayedRowCount()} rows`, `${grid.getDisplayedRowCount()}행`));
  grid.on('filterChange', e => { ctx.log(JSON.stringify(e.filters)); show(); });
  const f = (label: string, model: object) => button(ctx, label, () => grid.setFilter('ordered', model as never));
  f(h('Today', '오늘'), { type: 'date', op: 'today' });
  f(h('This week', '이번 주'), { type: 'date', op: 'thisWeek' });
  f(h('This month', '이번 달'), { type: 'date', op: 'thisMonth' });
  f(h('Last 30 days', '최근 30일'), { type: 'date', op: 'lastDays', days: 30 });
  f(h('Next 14 days', '앞으로 14일'), { type: 'date', op: 'nextDays', days: 14 });
  separator(ctx);
  button(ctx, h('Periods touching this month', '이번 달과 겹치는 기간'), () => grid.setFilter('period', { type: 'date', op: 'thisMonth' }));
  button(ctx, h('Clear', '모두 해제'), () => { grid.setFilter('ordered', null); grid.setFilter('period', null); });
  text(ctx, h('Or use the calendar button in the filter row, and the date boxes of the column menu.', '필터 행의 달력 버튼과 컬럼 메뉴의 날짜 칸도 써 보세요.'));
  show();
  return grid;
}

날짜 컬럼(type: 'date', 그리고 날짜·기간 편집기가 있는 컬럼)에는 날짜 필터가 붙습니다. 날짜는 현지 날짜 단위로 비교하므로 Date 값의 시각은 상관없습니다.

연산 목록

연산자	모델	통과 조건
같음 / 같지 않음	{ op: 'equals', value: '2026-03-05' }	그날 / 다른 날(빈 값은 같지 않음에서 제외)
이전 / 이후	{ op: 'after', value: '2026-01-01' }	그날보다 앞 / 뒤(그날 제외)
범위	{ op: 'between', value: '2026-01-01', valueTo: '2026-03-31' }	첫날부터 끝날까지(양 끝 포함)
오늘 / 어제	{ op: 'today' }	컴퓨터 시계 기준 오늘 / 어제
이번 주 / 지난주	{ op: 'thisWeek' }	이번 / 지난주 월요일~일요일
이번 달 / 지난달	{ op: 'lastMonth' }	달력 기준 한 달
이번 분기	{ op: 'thisQuarter' }	1~3월, 4~6월, 7~9월, 10~12월
올해 / 작년	{ op: 'thisYear' }	1월 1일~12월 31일
최근 N일	{ op: 'lastDays', days: 7 }	오늘과 그 앞 N − 1일
앞으로 N일	{ op: 'nextDays', days: 30 }	오늘과 그 뒤 N − 1일
빈 값 / 빈 값 아님	{ op: 'blank' }	날짜 없음 / 날짜 있음

상대 날짜는 행을 거를 때마다(새로고침 때도) 다시 계산하므로, "이번 달"로 저장한 보기는 다음 달에도 그달을 보여 줍니다.

grid.setFilter('joined', { type: 'date', op: 'thisMonth' });
grid.setFilter('joined', { type: 'date', op: 'lastDays', days: 30 });
grid.setFilter('joined', { type: 'date', op: 'between', value: '2026-01-01', valueTo: '2026-03-31' });
// last month or this month
grid.setFilter('joined', { type: 'combined', operator: 'or', conditions: [{ type: 'date', op: 'lastMonth' }, { type: 'date', op: 'thisMonth' }] });

메뉴의 달력

컬럼 메뉴: 날짜 칸을 누르면 아래에 달력이 열리고, 날짜를 누르면 칸에 들어갑니다. 범위는 이어서 두 번째 칸이 열립니다.
고급 필터: 날짜 컬럼에서만, 입력하는 칸 바로 아래에 같은 달력이 열립니다.
필터 행: 날짜 칸의 달력 버튼을 누르면 왼쪽에 상대 날짜, 오른쪽에 달력이 있습니다. 한 번 누르면 그날, 두 번 누르면 기간이고, 칸에는 *이번 달*이나 2026-01-01~2026-01-31처럼 고른 내용이 보입니다.
최근·앞으로 N일은 값 칸이 N을 넣는 숫자 칸으로 바뀝니다.

기간 컬럼

셀이 기간('2026-03-01 ~ 2026-03-10', [start, end], { start, end })인 컬럼에서는 기간이 필터와 겹치면 통과합니다.

연산자	통과 조건
같음	기간이 그날을 포함
이전 / 이후	기간이 그날 전에 시작 / 그날 뒤에 끝남
범위, 상대 날짜	기간과 범위가 하루라도 겹침

서버 데이터(datasource)일 때

그리드는 서버에 묻기 전에 상대 날짜를 정해진 날짜로 바꾸고(thisMonth → 이달 첫날·끝날의 between, today → equals), 같지 않음은 조건 두 개로 바꾸므로 서버 예제를 고칠 필요가 없습니다.

이 페이지에 대한 질문

그리드에서 이번 달 데이터만 보려면?

setFilter('date', { type: 'date', op: 'thisMonth' })를 쓰거나 필터 행의 달력 버튼에서 '이번 달'을 고르세요. 거를 때마다 다시 계산하므로 저장해 둔 보기가 계속 맞습니다.