svelte-range-calendar 0.2.0 → 0.5.0

package/src/shared/dates.ts

@@ -1,21 +1,10 @@
-import {
-  getCenturyEnd,
-  getCenturyStart,
-  getDayEnd,
-  getDayStart,
-  getDecadeEnd,
-  getDecadeStart,
-  getMonthEnd,
-  getMonthStart,
-  getYearEnd,
-  getYearStart,
-} from 'svelte-date-utils';
+import { createDateUtils } from 'svelte-date-utils';
+import type { DateAdapter } from 'svelte-date-utils';
 
 import type { CalendarType, DateType, LooseValue, LooseValuePiece, Range, View } from './types.js';
 
 export const views = ['century', 'decade', 'year', 'month'] as const satisfies readonly View[];
 
-/** Type of date represented by a single tile in a given view. */
 export const tileTypes: Record<View, DateType> = {
   century: 'decade',
   decade: 'year',
@@ -23,36 +12,25 @@ export const tileTypes: Record<View, DateType> = {
   month: 'day',
 };
 
-const dayInMs = 24 * 60 * 60 * 1000;
-
-const gregoryRegions = new Set(
-  'AG AS AU BD BR BS BT BW BZ CA CO DM DO ET GT GU HK HN ID IN JM JP KE KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PT PY SA SG SV TH TT TW UM US VE VI WS YE ZA ZW'.split(
-    ' ',
-  ),
-);
-const islamicRegions = new Set('AE AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY'.split(' '));
-
 export function getCalendarType(locale: string): CalendarType {
   let region: string | undefined;
-
   try {
     region = new Intl.Locale(locale).maximize().region;
   } catch {
     region = locale.split('-')[1]?.toUpperCase();
   }
-
-  if (region === 'IL') {
-    return 'hebrew';
-  }
-
-  if (region && islamicRegions.has(region)) {
+  if (region === 'IL') return 'hebrew';
+  if (region && 'AE AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY'.split(' ').includes(region)) {
     return 'islamic';
   }
-
-  if (region && gregoryRegions.has(region)) {
+  if (
+    region &&
+    'AG AS AU BD BR BS BT BW BZ CA CO DM DO ET GT GU HK HN ID IN JM JP KE KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PT PY SA SG SV TH TT TW UM US VE VI WS YE ZA ZW'
+      .split(' ')
+      .includes(region)
+  ) {
     return 'gregory';
   }
-
   return 'iso8601';
 }
 
@@ -63,128 +41,145 @@ const weekStartDays: Record<CalendarType, number> = {
   islamic: 6,
 };
 
-export function isWeekend(date: Date, calendarType: CalendarType): boolean {
-  const day = date.getDay();
-
+export function isWeekend<T>(
+  adapter: DateAdapter<T>,
+  date: T,
+  calendarType: CalendarType,
+): boolean {
+  const day = adapter.toJsDate(date).getDay();
   return calendarType === 'islamic' || calendarType === 'hebrew'
     ? day === 5 || day === 6
     : day === 0 || day === 6;
 }
 
-export function addDays(date: Date, days: number): Date {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+export function addDays<T>(adapter: DateAdapter<T>, date: T, days: number): T {
+  return adapter.startOfDay(adapter.addDays(date, days));
 }
 
-export function getBeginOfWeek(date: Date, calendarType: CalendarType): Date {
-  const offset = (date.getDay() - weekStartDays[calendarType] + 7) % 7;
-
-  return addDays(date, -offset);
+export function getBeginOfWeek<T>(adapter: DateAdapter<T>, date: T, calendarType: CalendarType): T {
+  const day = adapter.toJsDate(date).getDay();
+  const offset = (day - weekStartDays[calendarType] + 7) % 7;
+  return addDays(adapter, date, -offset);
 }
 
-export function getDaysBetween(from: Date, to: Date): number {
-  const fromDay = Date.UTC(from.getFullYear(), from.getMonth(), from.getDate());
-  const toDay = Date.UTC(to.getFullYear(), to.getMonth(), to.getDate());
-
-  return Math.round((toDay - fromDay) / dayInMs);
+export function getDaysBetween<T>(adapter: DateAdapter<T>, from: T, to: T): number {
+  const a = adapter.toJsDate(from);
+  const b = adapter.toJsDate(to);
+  const fromDay = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
+  const toDay = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
+  return Math.round((toDay - fromDay) / 86_400_000);
 }
 
-export function getWeekNumber(date: Date, calendarType: CalendarType): number {
+export function getWeekNumber<T>(
+  adapter: DateAdapter<T>,
+  date: T,
+  calendarType: CalendarType,
+): number {
+  const jsDate = adapter.toJsDate(date);
   if (calendarType === 'iso8601') {
-    const thursday = addDays(date, 4 - (date.getDay() || 7));
-    const yearStart = new Date(thursday.getFullYear(), 0, 1);
-
-    return Math.ceil((getDaysBetween(yearStart, thursday) + 1) / 7);
+    const day = jsDate.getDay() || 7;
+    const thursday = addDays(adapter, date, 4 - day);
+    const year = adapter.getYear(thursday);
+    const yearStart = adapter.setDate(
+      adapter.setMonth(adapter.setYear(adapter.date(), year), 0),
+      1,
+    );
+    return Math.ceil((getDaysBetween(adapter, yearStart, thursday) + 1) / 7);
   }
-
-  const weekStart = getBeginOfWeek(date, calendarType);
-
-  // The week containing January 1st is week 1
-  if (addDays(weekStart, 6).getFullYear() > weekStart.getFullYear()) {
-    return 1;
-  }
-
-  const firstWeekStart = getBeginOfWeek(new Date(weekStart.getFullYear(), 0, 1), calendarType);
-
-  return Math.round(getDaysBetween(firstWeekStart, weekStart) / 7) + 1;
+  const weekStart = getBeginOfWeek(adapter, date, calendarType);
+  if (adapter.getYear(addDays(adapter, weekStart, 6)) > adapter.getYear(weekStart)) return 1;
+  const year = adapter.getYear(weekStart);
+  const firstDate = adapter.setDate(adapter.setMonth(adapter.setYear(adapter.date(), year), 0), 1);
+  const firstWeekStart = getBeginOfWeek(adapter, firstDate, calendarType);
+  return Math.round(getDaysBetween(adapter, firstWeekStart, weekStart) / 7) + 1;
 }
 
-export function getBegin(type: DateType, date: Date): Date {
+export function getBegin<T>(adapter: DateAdapter<T>, type: DateType, date: T): T {
+  const utils = createDateUtils(adapter);
   switch (type) {
     case 'century':
-      return getCenturyStart(date);
+      return utils.getCenturyStart(date);
     case 'decade':
-      return getDecadeStart(date);
+      return utils.getDecadeStart(date);
     case 'year':
-      return getYearStart(date);
+      return utils.getYearStart(date);
     case 'month':
-      return getMonthStart(date);
+      return utils.getMonthStart(date);
     case 'day':
-      return getDayStart(date);
+      return utils.getDayStart(date);
   }
 }
 
-export function getEnd(type: DateType, date: Date): Date {
+export function getEnd<T>(adapter: DateAdapter<T>, type: DateType, date: T): T {
+  const utils = createDateUtils(adapter);
   switch (type) {
     case 'century':
-      return getCenturyEnd(date);
+      return utils.getCenturyEnd(date);
     case 'decade':
-      return getDecadeEnd(date);
+      return utils.getDecadeEnd(date);
     case 'year':
-      return getYearEnd(date);
+      return utils.getYearEnd(date);
     case 'month':
-      return getMonthEnd(date);
+      return utils.getMonthEnd(date);
     case 'day':
-      return getDayEnd(date);
+      return utils.getDayEnd(date);
   }
 }
 
-export function getRange(type: DateType, date: Date): Range<Date> {
-  return [getBegin(type, date), getEnd(type, date)];
+export function getRange<T>(adapter: DateAdapter<T>, type: DateType, date: T): Range<T> {
+  return [getBegin(adapter, type, date), getEnd(adapter, type, date)];
 }
 
 const stepInYears: Record<View, number> = { century: 100, decade: 10, month: 0, year: 1 };
 const bigStepInYears: Record<View, number> = { century: 0, decade: 100, month: 1, year: 10 };
 
-/**
- * Moves a date by one unit of the given view (`double` = false), or by one unit of the next
- * bigger view (`double` = true), and returns the beginning of the resulting period.
- */
-export function shiftDate(view: View, date: Date, amount: number, double = false): Date {
-  const year = date.getFullYear();
-  const month = date.getMonth();
+function makeDate<T>(adapter: DateAdapter<T>, year: number, month: number, day = 1): T {
+  const date = adapter.setYear(adapter.date(), year);
+  return adapter.setDate(adapter.setMonth(date, month), day);
+}
 
+export function shiftDate<T>(
+  adapter: DateAdapter<T>,
+  view: View,
+  date: T,
+  amount: number,
+  double = false,
+): T {
+  const year = adapter.getYear(date);
+  const month = adapter.getMonth(date);
   if (!double) {
     return view === 'month'
-      ? new Date(year, month + amount, 1)
-      : getBegin(view, new Date(year + amount * stepInYears[view], 0, 1));
+      ? makeDate(adapter, year, month + amount)
+      : getBegin(adapter, view, makeDate(adapter, year + amount * stepInYears[view], 0));
   }
-
   return getBegin(
+    adapter,
     view,
-    new Date(year + amount * bigStepInYears[view], view === 'month' ? month : 0, 1),
+    makeDate(adapter, year + amount * bigStepInYears[view], view === 'month' ? month : 0),
   );
 }
 
-export function isRangeWithinRange(greater: Range<Date>, smaller: Range<Date>): boolean {
-  return (
-    greater[0].getTime() <= smaller[0].getTime() && greater[1].getTime() >= smaller[1].getTime()
-  );
+export function isRangeWithinRange<T>(
+  adapter: DateAdapter<T>,
+  greater: Range<T>,
+  smaller: Range<T>,
+): boolean {
+  return !adapter.isAfter(smaller[0], greater[0]) && !adapter.isBefore(smaller[1], greater[1]);
 }
 
-export function toDate(value: LooseValuePiece | undefined): Date | null {
-  if (value === null || value === undefined) {
-    return null;
-  }
-
-  const date = value instanceof Date ? value : new Date(value);
-
-  return Number.isNaN(date.getTime()) ? null : date;
+export function toDate<T>(
+  adapter: DateAdapter<T>,
+  value: LooseValuePiece<T> | undefined,
+): T | null {
+  if (value === null || value === undefined) return null;
+  const date = typeof value === 'string' ? adapter.date(value) : value;
+  return adapter.isValid(date) ? date : null;
 }
 
-export function normalizeValue(value: LooseValue | undefined): Range<Date | null> {
-  if (Array.isArray(value)) {
-    return [toDate(value[0]), toDate(value[1])];
-  }
-
-  return [toDate(value), null];
+export function normalizeValue<T>(
+  adapter: DateAdapter<T>,
+  value: LooseValue<T> | undefined,
+): Range<T | null> {
+  if (Array.isArray(value)) return [toDate(adapter, value[0]), toDate(adapter, value[1])];
+  return [toDate(adapter, value), null];
 }

package/src/shared/formatters.ts

@@ -12,7 +12,7 @@ function getFormatter(locale: string | undefined, options: Intl.DateTimeFormatOp
   return formatter;
 }
 
-export type Formatter = (locale: string | undefined, date: Date) => string;
+export type Formatter<T = Date> = (locale: string | undefined, date: T) => string;
 
 export const formatDay: Formatter = (locale, date) =>
   getFormatter(locale, { day: 'numeric' }).format(date);

package/src/shared/types.ts

@@ -8,13 +8,13 @@ export type Detail = View;
 
 export type DateType = View | 'day';
 
-export type LooseValuePiece = string | Date | null;
+export type LooseValuePiece<T = Date> = string | T | null;
 
-export type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
+export type LooseValue<T = Date> = LooseValuePiece<T> | Range<LooseValuePiece<T>>;
 
-export type ValuePiece = Date | null;
+export type ValuePiece<T = Date> = T | null;
 
-export type Value = ValuePiece | Range<ValuePiece>;
+export type Value<T = Date> = ValuePiece<T> | Range<ValuePiece<T>>;
 
 export type ReturnValue = 'start' | 'end' | 'range';
 
@@ -27,21 +27,21 @@ export type NavigationAction =
   | 'drillUp'
   | 'drillDown';
 
-export type ViewCallbackProperties = {
+export type ViewCallbackProperties<T = Date> = {
   action: NavigationAction;
-  activeStartDate: Date | null;
-  value: LooseValue | undefined;
+  activeStartDate: T | null;
+  value: LooseValue<T> | undefined;
   view: View;
 };
 
-export type TileArgs = {
-  activeStartDate: Date;
-  date: Date;
+export type TileArgs<T = Date> = {
+  activeStartDate: T;
+  date: T;
   view: View;
 };
 
-export type NavigationLabelArgs = {
-  date: Date;
+export type NavigationLabelArgs<T = Date> = {
+  date: T;
   label: string;
   locale: string | undefined;
   view: View;