Date 확장 사용법 ($date)
개요
$date는 JavaScript Date 객체를 다루기 위한 확장 함수를 제공합니다. 날짜 비교, 문자열 변환, 가산/감산, 상대 시간 표시, 주차 계산 등 화면에서 자주 필요한 날짜 처리 기능을 하나의 전역 객체로 모아 제공합니다.
로드 방법
syn.js가 로드되면 전역에 $date로 즉시 사용할 수 있습니다. (syn. 접두사 없이 전역 변수로 노출됨에 유의)
빠른 시작
const today = $date.now();
const tomorrow = $date.addDay(today, 1);
$date.toString(today, 'yyyy-MM-dd'); // '2026-07-06' 형식 문자열
주요 시나리오
날짜 문자열로 표시하기
toString(date, format, options)은 자주 쓰는 서식 코드(d, t, a, n, w 등)뿐 아니라 yyyy, MM, dd, HH, mm, ss 조합 서식도 지원합니다.
$date.toString(new Date(), 'n'); // '2026년 07월 06일 (월)'
$date.toString(new Date(), 'yyyy-MM-dd HH:mm');
날짜 가산/감산과 기간 비교
addDay, addMonth, addYear 등으로 날짜를 이동하고, diff(start, end, interval)로 두 날짜의 차이를 계산합니다.
const nextWeek = $date.addWeek($date.now(), 1);
$date.diff($date.now(), nextWeek, 'day'); // 7
상대 시간 표시
timeAgo(dateInput)는 과거 시점과 현재의 차이를 "3분 전", "2일 전"과 같은 한국어 문자열로 반환합니다.
$date.timeAgo('2026-07-01T00:00:00'); // 예: '5일 전'
문자열/숫자를 Date로 안전하게 변환
parseDate(dateInput)는 문자열, 숫자, Date 객체를 모두 받아 Date 객체로 정규화합니다. 변환할 수 없으면 null을 반환합니다.
$date.parseDate('2026-07-06T00:00:00');
짧은 코드로 날짜값 인코딩/디코딩
dateConvert(inputValue, operationType)는 날짜(yyyyMMdd) 숫자 값을 36진수 문자열로 압축('E')하거나 되돌립니다('D'). 짧은 식별자나 URL 파라미터에 날짜를 담을 때 유용합니다.
const encoded = $date.dateConvert(new Date(), 'E');
$date.dateConvert(encoded, 'D');
실전 예제 페이지
/sample/syn/extension_date.html 예제에서 다음 항목을 실습할 수 있습니다.
$date.version,$date.interval속성 조회now(),clone(),isBetween(),equals(),equalDay(),isToday()toString()(다양한 서식 코드)addSecond(),addMinute(),addHour(),addDay(),addWeek(),addMonth(),addYear()getFirstDate(),getLastDate(),diff(),toTicks()isDate(),isISOString(),weekOfMonth()getAmPm(),get12Time(),timeAgo(),parseDate(),dateConvert()
주의 사항
- 대부분의 메서드는 인자가
Date인스턴스가 아니면null또는false/0을 반환하도록 방어 코드가 들어 있습니다. 문자열을 바로 넘기지 말고parseDate()로 변환한 뒤 사용하세요. addMonth(),addYear()는 말일/윤년 보정을 자동으로 수행합니다(예: 1월 31일 + 1개월은 2월 28/29일로 보정).diff()의interval인자는year,week,day,hour,minute,second또는month문자열을 사용합니다.month는 별도 계산식을 사용하므로 다른 단위와 혼동하지 않도록 주의합니다.toString()의'w'서식은 내부적으로weekOfMonth()를 호출하므로 연산 비용이 상대적으로 큽니다. 반복 렌더링(그리드 셀 등)에서 남용하지 않도록 합니다.
관련 모듈
- API 상세는 아래 API 참조 섹션을 확인하세요.
API 참조
모듈 정보
| 항목 | 내용 |
|---|---|
| 전역 별칭 | $date (syn.$ 접두사 없음, 전역 변수) |
| 예제 페이지 | /sample/syn/extension_date.html |
| 의존 모듈 | $object(isString, isDate), $string(isNullOrEmpty, toNumber), $validation(regexs.isoDate), syn.$l(오류 로깅) |
속성
$date.interval
- 설명: 초 단위가 아닌, 밀리초 단위의 날짜/시간 간격 상수 모음입니다(
Object.freeze로 동결). - 값:
{ year, week, day, hour, minute, second }(각 단위의 밀리초 값)
메서드
$date.now()
- 설명: 현재 시각의
Date객체를 반환합니다. - 매개변수: 없음
- 반환값:
Date - 예시
const now = $date.now();
$date.clone(date)
- 설명:
Date객체 또는 날짜 문자열을 새로운Date객체로 복제합니다. - 매개변수
이름 타입 필수 설명 date Date|stringY 복제할 날짜 값 - 반환값:
Date|null— 변환 실패 시null - 예시
const cloned = $date.clone(new Date());
$date.isBetween(date, start, end)
- 설명:
date가start와end사이(포함)에 있는지 확인합니다. - 매개변수
이름 타입 필수 설명 date DateY 검사할 날짜 start DateY 기간 시작 end DateY 기간 종료 - 반환값:
boolean - 예시
$date.isBetween(new Date(), start, end);
$date.equals(date, targetDate)
- 설명: 두
Date값이 밀리초 단위까지 완전히 동일한지 비교합니다. - 매개변수
이름 타입 필수 설명 date DateY 비교 대상 1 targetDate DateY 비교 대상 2 - 반환값:
boolean - 예시
$date.equals(a, b);
$date.equalDay(date, targetDate)
- 설명: 두
Date값의 연/월/일이 동일한지 비교합니다(toDateString()비교). - 매개변수
이름 타입 필수 설명 date DateY 비교 대상 1 targetDate DateY 비교 대상 2 - 반환값:
boolean - 예시
$date.equalDay(a, b);
$date.isToday(date)
- 설명:
date가 오늘 날짜와 동일한지 확인합니다. - 매개변수
이름 타입 필수 설명 date DateY 검사할 날짜 - 반환값:
boolean - 예시
$date.isToday(new Date());
$date.toString(date, format, options = {})
- 설명:
Date값을 지정한 서식 코드로 변환합니다. 짧은 서식 코드(d,t,a,i,f,s,n,nt,mdn,w,wn,m,y,ym)와, 코드가 없을 때는yyyy/MM/dd/HH/mm/ss토큰 조합 서식을 지원합니다. - 매개변수
이름 타입 필수 설명 date Date|stringY 변환할 날짜 format stringN 서식 코드 또는 토큰 조합 문자열 options objectN w서식에서 사용되는{ weekStartSunday }옵션 - 반환값:
string— 변환 실패 시 빈 문자열 - 예시
$date.toString(new Date(), 'a'); // '2026-07-06 13:20:00'$date.toString(new Date(), 'yyyy/MM/dd'); // 'yyyy/MM/dd' 토큰 조합
$date.getAmPm(time, amText, pmText)
- 설명: 시간 값(
Date,'HH:mm'문자열, ISO 문자열, 숫자 등)을 기준으로 오전/오후 텍스트를 반환합니다. - 매개변수
이름 타입 필수 설명 time Date|string|numberN 시간 값 amText stringN 오전 표기 문자열(기본값 'AM')pmText stringN 오후 표기 문자열(기본값 'PM') - 반환값:
string - 예시
$date.getAmPm(new Date(), '오전', '오후');
$date.get12Time(time, amText, pmText)
- 설명: 시간 값을 12시간제
AM/PM HH:mm:ss형식 문자열로 변환합니다. - 매개변수
이름 타입 필수 설명 time Date|string|numberN 시간 값 amText stringN 오전 표기 문자열(기본값 'AM')pmText stringN 오후 표기 문자열(기본값 'PM') - 반환값:
string— 예:'PM 01:20:00' - 예시
$date.get12Time(new Date());
$date.addSecond(date, val) / $date.addMinute(date, val) / $date.addHour(date, val)
- 설명: 각각 초/분/시 단위로 날짜에 값을 더한 새
Date객체를 반환합니다. - 매개변수
이름 타입 필수 설명 date DateY 기준 날짜 val numberY 더할 값(음수 가능) - 반환값:
Date|null - 예시
$date.addMinute(new Date(), 30);
$date.addDay(date, val) / $date.addWeek(date, val)
- 설명: 일/주 단위로 날짜를 이동합니다.
addWeek는 내부적으로addDay(date, val * 7)을 호출합니다. - 매개변수
이름 타입 필수 설명 date DateY 기준 날짜 val numberY 더할 일/주 값 - 반환값:
Date|null - 예시
$date.addDay(new Date(), -7);
$date.addMonth(date, val)
- 설명: 월 단위로 날짜를 이동합니다. 대상 월에 존재하지 않는 일자(예: 1월 31일 + 1개월)는 해당 월의 말일로 자동 보정됩니다.
- 매개변수
이름 타입 필수 설명 date DateY 기준 날짜 val numberY 더할 개월 수 - 반환값:
Date|null - 예시
$date.addMonth(new Date('2026-01-31'), 1); // 2026-02-28
$date.addYear(date, val)
- 설명: 년 단위로 날짜를 이동합니다. 윤년 2월 29일 기준 날짜는 대상 연도가 평년이면 2월 28일로 보정됩니다.
- 매개변수
이름 타입 필수 설명 date DateY 기준 날짜 val numberY 더할 연도 수 - 반환값:
Date|null - 예시
$date.addYear(new Date('2024-02-29'), 1); // 2025-02-28