svelte-datetimerange-picker 0.2.0 → 0.5.0

package/README.md

@@ -8,7 +8,7 @@ A datetime range picker for your Svelte 5 app.
 
 ## tl;dr
 
-- Install by executing `npm install svelte-datetimerange-picker`.
+- Install by executing `npm install svelte-datetimerange-picker svelte-date-utils`.
 - Import by adding `import DateTimeRangePicker from 'svelte-datetimerange-picker'`.
 - Use by adding `<DateTimeRangePicker />`. Use the `onChange` prop for getting new values.
 
@@ -29,24 +29,30 @@ Your project needs to use Svelte 5 or later. The picker relies on modern web tec
 
 ### Installation
 
-Add svelte-datetimerange-picker to your project by executing `npm install svelte-datetimerange-picker`.
+Add svelte-datetimerange-picker and its date adapter utilities to your project by executing `npm install svelte-datetimerange-picker svelte-date-utils`.
 
 ### Usage
 
 ```svelte
 <script lang="ts">
   import DateTimeRangePicker from 'svelte-datetimerange-picker';
+  import { AdapterDate } from 'svelte-date-utils';
+  import { provideDateAdapter } from 'svelte-date-utils';
 
   type ValuePiece = Date | null;
 
   type Value = ValuePiece | [ValuePiece, ValuePiece];
 
+  provideDateAdapter(new AdapterDate());
+
   let value = $state<Value>([new Date(), new Date()]);
 </script>
 
 <DateTimeRangePicker onChange={(nextValue) => (value = nextValue)} {value} />
 ```
 
+The adapter is required and is read from Svelte context. Call `provideDateAdapter(adapter)` in this component or an ancestor before rendering the picker. Without a provider, the picker throws an error. The selected adapter determines the date object type used by `value` and `onChange`; `AdapterDate` uses native `Date`. For date-fns, Luxon, or `@internationalized/date`, use the matching adapter exported by `svelte-date-utils/date-fns`, `svelte-date-utils/luxon`, or `svelte-date-utils/internationalized`.
+
 ### Styling
 
 Styles for the picker, the calendar and the clock are imported automatically. All elements use BEM class names starting with `svelte-datetimerange-picker`, `svelte-calendar` and `svelte-clock`, so you can build on them.

package/dist/DateTimeRangePicker.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import './DateTimeRangePicker.css';
 
   import { untrack } from 'svelte';
@@ -6,6 +6,7 @@
   import { DateTimeInput } from 'svelte-datetime-input';
   import { fit, portal } from 'svelte-fit-action';
   import { Calendar } from 'svelte-range-calendar';
+  import { getDateAdapter } from 'svelte-date-utils';
 
   import type { ComponentProps, Snippet } from 'svelte';
   import type { ClassValue, HTMLAttributes } from 'svelte/elements';
@@ -15,11 +16,11 @@
   const outsideActionEvents = ['mousedown', 'focusin', 'touchstart'] as const;
   const allViews = ['hour', 'minute', 'second'] as const;
 
-  type CalendarProps = Omit<ComponentProps<typeof Calendar>, 'onChange' | 'selectRange' | 'value'>;
+  type CalendarProps<T> = Omit<ComponentProps<typeof Calendar>, 'onChange' | 'selectRange' | 'value'>;
 
-  type ClockProps = Omit<ComponentProps<typeof Clock>, 'value'>;
+  type ClockProps<T> = Omit<ComponentProps<typeof Clock>, 'value'>;
 
-  type DateTimeRangePickerProps = {
+  type DateTimeRangePickerProps<T> = {
     /** `aria-label` for the AM/PM select input. */
     amPmAriaLabel?: string;
     /** Automatically focuses the input on mount. */
@@ -31,7 +32,7 @@
      */
     calendarIcon?: Snippet | string | null;
     /** Props to pass to the Calendar component. */
-    calendarProps?: CalendarProps;
+    calendarProps?: CalendarProps<T>;
     /**
      * Class name(s) that will be added along with `"svelte-datetimerange-picker"` to the main `<div>` element.
      *
@@ -46,7 +47,7 @@
      */
     clearIcon?: Snippet | string | null;
     /** Props to pass to the Clock component. */
-    clockProps?: ClockProps;
+    clockProps?: ClockProps<T>;
     /**
      * Whether to close the widgets on value selection. **Note**: It's recommended to use `shouldCloseWidgets` function instead.
      *
@@ -114,7 +115,7 @@
      */
     locale?: string;
     /** Maximum date that the user can select. */
-    maxDate?: Date;
+    maxDate?: T;
     /**
      * The most detailed calendar view that the user shall see. Can be `"hour"`, `"minute"` or `"second"`.
      *
@@ -122,7 +123,7 @@
      */
     maxDetail?: Detail;
     /** Minimum date that the user can select. */
-    minDate?: Date;
+    minDate?: T;
     /** `aria-label` for the minute input. */
     minuteAriaLabel?: string;
     /**
@@ -152,7 +153,7 @@
     /** Function called when the calendar opens. */
     onCalendarOpen?: () => void;
     /** Function called when the user picks a valid datetime. */
-    onChange?: (value: Value) => void;
+    onChange?: (value: Value<T>) => void;
     /** Function called when the clock closes. */
     onClockClose?: () => void;
     /** Function called when the clock opens. */
@@ -214,7 +215,7 @@
      * @example [new Date(2017, 0, 1, 22, 15), new Date(2017, 0, 1, 23, 45)]
      * @example ["2017-01-01T22:15:00", "2017-01-01T23:45:00"]
      */
-    value?: LooseValue;
+    value?: LooseValue<T>;
     /** `aria-label` for the year input. */
     yearAriaLabel?: string;
     /**
@@ -277,7 +278,9 @@
     yearAriaLabel,
     yearPlaceholder,
     ...otherProps
-  }: DateTimeRangePickerProps = $props();
+  }: DateTimeRangePickerProps<T> = $props();
+
+  const adapter = getDateAdapter<T>('DateTimeRangePicker');
 
   let isCalendarOpen = $state<boolean | null>(untrack(() => isCalendarOpenProps));
   let isClockOpen = $state<boolean | null>(untrack(() => isClockOpenProps));
@@ -351,7 +354,7 @@
     closeClock({ reason });
   }
 
-  function onChange(nextValue: Value, shouldCloseWidgets = shouldCloseWidgetsOnSelect) {
+  function onChange(nextValue: Value<T>, shouldCloseWidgets = shouldCloseWidgetsOnSelect) {
     if (shouldCloseWidgets) {
       closeAllWidgets({ reason: 'select' });
     }
@@ -359,33 +362,34 @@
     onChangeProps?.(nextValue);
   }
 
-  function onChangeFrom(nextValueFrom: Date | null, shouldCloseWidgets: boolean) {
-    onChange([nextValueFrom, valueTo ? new Date(valueTo) : null], shouldCloseWidgets);
+  function onChangeFrom(nextValueFrom: T | null, shouldCloseWidgets: boolean) {
+    onChange([nextValueFrom, normalizeDate(valueTo)], shouldCloseWidgets);
+  }
+
+  function onChangeTo(nextValueTo: T | null, shouldCloseWidgets: boolean) {
+    onChange([normalizeDate(valueFrom), nextValueTo], shouldCloseWidgets);
   }
 
-  function onChangeTo(nextValueTo: Date | null, shouldCloseWidgets: boolean) {
-    onChange([valueFrom ? new Date(valueFrom) : null, nextValueTo], shouldCloseWidgets);
+  function normalizeDate(value: string | T | null | undefined): T | null {
+    if (value === null || value === undefined || value === '') return null;
+    return typeof value === 'string' ? adapter.date(value) : value;
   }
 
-  function withTimeOf(date: Date | null, source: string | Date | null | undefined): Date | null {
+  function withTimeOf(date: T | null, source: string | T | null | undefined): T | null {
     if (!source || !date) {
       return date;
     }
 
-    const sourceDate = new Date(source);
-    const result = new Date(date);
-
-    result.setHours(
-      sourceDate.getHours(),
-      sourceDate.getMinutes(),
-      sourceDate.getSeconds(),
-      sourceDate.getMilliseconds(),
-    );
+    const sourceDate = typeof source === 'string' ? adapter.date(source) : source;
+    let result = adapter.setHours(date, adapter.getHours(sourceDate));
+    result = adapter.setMinutes(result, adapter.getMinutes(sourceDate));
+    result = adapter.setSeconds(result, adapter.getSeconds(sourceDate));
+    result = adapter.setMilliseconds(result, adapter.getMilliseconds(sourceDate));
 
     return result;
   }
 
-  function onDateChange(nextValue: Value, shouldCloseWidgets?: boolean) {
+  function onDateChange(nextValue: Value<T>, shouldCloseWidgets?: boolean) {
     // The calendar passes an array of values when selectRange is enabled
     const [rawNextValueFrom, rawNextValueTo] = Array.isArray(nextValue) ? nextValue : [nextValue];
 
@@ -551,7 +555,7 @@
     {locale}
     {maxDate}
     {minDate}
-    onChange={(nextValue) => onDateChange(nextValue)}
+    onChange={(nextValue) => onDateChange(nextValue as Value<T>)}
     selectRange
     {value}
     {...calendarProps}
@@ -585,7 +589,8 @@
       {...commonInputProps}
       {autoFocus}
       name="{name}_from"
-      onChange={onChangeFrom}
+      onChange={(nextValue, shouldCloseWidgets) =>
+        onChangeFrom(nextValue as T | null, shouldCloseWidgets)}
       value={valueFrom}
     />
     <span class="{baseClassName}__range-divider" data-testid="range-divider">
@@ -598,7 +603,8 @@
     <DateTimeInput
       {...commonInputProps}
       name="{name}_to"
-      onChange={onChangeTo}
+      onChange={(nextValue, shouldCloseWidgets) =>
+        onChangeTo(nextValue as T | null, shouldCloseWidgets)}
       value={valueTo}
     />
     {#if clearIcon !== null}

package/dist/DateTimeRangePicker.svelte.d.ts

@@ -4,9 +4,9 @@ import { Calendar } from 'svelte-range-calendar';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 import type { CloseReason, Detail, LooseValue, OpenReason, Value } from './shared/types.js';
-type CalendarProps = Omit<ComponentProps<typeof Calendar>, 'onChange' | 'selectRange' | 'value'>;
-type ClockProps = Omit<ComponentProps<typeof Clock>, 'value'>;
-type DateTimeRangePickerProps = {
+type CalendarProps<T> = Omit<ComponentProps<typeof Calendar>, 'onChange' | 'selectRange' | 'value'>;
+type ClockProps<T> = Omit<ComponentProps<typeof Clock>, 'value'>;
+type DateTimeRangePickerProps<T> = {
     /** `aria-label` for the AM/PM select input. */
     amPmAriaLabel?: string;
     /** Automatically focuses the input on mount. */
@@ -18,7 +18,7 @@ type DateTimeRangePickerProps = {
      */
     calendarIcon?: Snippet | string | null;
     /** Props to pass to the Calendar component. */
-    calendarProps?: CalendarProps;
+    calendarProps?: CalendarProps<T>;
     /**
      * Class name(s) that will be added along with `"svelte-datetimerange-picker"` to the main `<div>` element.
      *
@@ -33,7 +33,7 @@ type DateTimeRangePickerProps = {
      */
     clearIcon?: Snippet | string | null;
     /** Props to pass to the Clock component. */
-    clockProps?: ClockProps;
+    clockProps?: ClockProps<T>;
     /**
      * Whether to close the widgets on value selection. **Note**: It's recommended to use `shouldCloseWidgets` function instead.
      *
@@ -101,7 +101,7 @@ type DateTimeRangePickerProps = {
      */
     locale?: string;
     /** Maximum date that the user can select. */
-    maxDate?: Date;
+    maxDate?: T;
     /**
      * The most detailed calendar view that the user shall see. Can be `"hour"`, `"minute"` or `"second"`.
      *
@@ -109,7 +109,7 @@ type DateTimeRangePickerProps = {
      */
     maxDetail?: Detail;
     /** Minimum date that the user can select. */
-    minDate?: Date;
+    minDate?: T;
     /** `aria-label` for the minute input. */
     minuteAriaLabel?: string;
     /**
@@ -139,7 +139,7 @@ type DateTimeRangePickerProps = {
     /** Function called when the calendar opens. */
     onCalendarOpen?: () => void;
     /** Function called when the user picks a valid datetime. */
-    onChange?: (value: Value) => void;
+    onChange?: (value: Value<T>) => void;
     /** Function called when the clock closes. */
     onClockClose?: () => void;
     /** Function called when the clock opens. */
@@ -207,7 +207,7 @@ type DateTimeRangePickerProps = {
      * @example [new Date(2017, 0, 1, 22, 15), new Date(2017, 0, 1, 23, 45)]
      * @example ["2017-01-01T22:15:00", "2017-01-01T23:45:00"]
      */
-    value?: LooseValue;
+    value?: LooseValue<T>;
     /** `aria-label` for the year input. */
     yearAriaLabel?: string;
     /**
@@ -217,6 +217,27 @@ type DateTimeRangePickerProps = {
      */
     yearPlaceholder?: string;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'onchange' | 'onfocus'>;
-declare const DateTimeRangePicker: import("svelte").Component<DateTimeRangePickerProps, {}, "">;
-type DateTimeRangePicker = ReturnType<typeof DateTimeRangePicker>;
+declare function $$render<T>(): {
+    props: DateTimeRangePickerProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DateTimeRangePicker: $$IsomorphicComponent;
+type DateTimeRangePicker<T> = InstanceType<typeof DateTimeRangePicker<T>>;
 export default DateTimeRangePicker;

package/dist/shared/types.d.ts

@@ -2,9 +2,9 @@ export type Range<T> = [T, T];
 export type AmPmType = 'am' | 'pm';
 export type CloseReason = 'buttonClick' | 'escape' | 'outsideAction' | 'select';
 export type Detail = 'hour' | 'minute' | 'second';
-type LooseValuePiece = string | Date | null;
-export type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
+type LooseValuePiece<T = Date> = string | T | null;
+export type LooseValue<T = Date> = LooseValuePiece<T> | Range<LooseValuePiece<T>>;
 export type OpenReason = 'buttonClick' | 'focus';
-type ValuePiece = Date | null;
-export type Value = ValuePiece | Range<ValuePiece>;
+type ValuePiece<T = Date> = T | null;
+export type Value<T = Date> = ValuePiece<T> | Range<ValuePiece<T>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-datetimerange-picker",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "A datetime range picker for your Svelte app.",
   "keywords": [
     "calendar",
@@ -55,10 +55,10 @@
     "watch": "svelte-package --input src --output dist --watch"
   },
   "dependencies": {
-    "svelte-analog-clock": "^0.2.0",
-    "svelte-datetime-input": "^0.2.0",
-    "svelte-fit-action": "^0.2.0",
-    "svelte-range-calendar": "^0.2.0"
+    "svelte-analog-clock": "^0.5.0",
+    "svelte-datetime-input": "^0.5.0",
+    "svelte-fit-action": "^0.5.0",
+    "svelte-range-calendar": "^0.5.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^3.0.1",

package/src/DateTimeRangePicker.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import './DateTimeRangePicker.css';
 
   import { untrack } from 'svelte';
@@ -6,6 +6,7 @@
   import { DateTimeInput } from 'svelte-datetime-input';
   import { fit, portal } from 'svelte-fit-action';
   import { Calendar } from 'svelte-range-calendar';
+  import { getDateAdapter } from 'svelte-date-utils';
 
   import type { ComponentProps, Snippet } from 'svelte';
   import type { ClassValue, HTMLAttributes } from 'svelte/elements';
@@ -15,11 +16,11 @@
   const outsideActionEvents = ['mousedown', 'focusin', 'touchstart'] as const;
   const allViews = ['hour', 'minute', 'second'] as const;
 
-  type CalendarProps = Omit<ComponentProps<typeof Calendar>, 'onChange' | 'selectRange' | 'value'>;
+  type CalendarProps<T> = Omit<ComponentProps<typeof Calendar>, 'onChange' | 'selectRange' | 'value'>;
 
-  type ClockProps = Omit<ComponentProps<typeof Clock>, 'value'>;
+  type ClockProps<T> = Omit<ComponentProps<typeof Clock>, 'value'>;
 
-  type DateTimeRangePickerProps = {
+  type DateTimeRangePickerProps<T> = {
     /** `aria-label` for the AM/PM select input. */
     amPmAriaLabel?: string;
     /** Automatically focuses the input on mount. */
@@ -31,7 +32,7 @@
      */
     calendarIcon?: Snippet | string | null;
     /** Props to pass to the Calendar component. */
-    calendarProps?: CalendarProps;
+    calendarProps?: CalendarProps<T>;
     /**
      * Class name(s) that will be added along with `"svelte-datetimerange-picker"` to the main `<div>` element.
      *
@@ -46,7 +47,7 @@
      */
     clearIcon?: Snippet | string | null;
     /** Props to pass to the Clock component. */
-    clockProps?: ClockProps;
+    clockProps?: ClockProps<T>;
     /**
      * Whether to close the widgets on value selection. **Note**: It's recommended to use `shouldCloseWidgets` function instead.
      *
@@ -114,7 +115,7 @@
      */
     locale?: string;
     /** Maximum date that the user can select. */
-    maxDate?: Date;
+    maxDate?: T;
     /**
      * The most detailed calendar view that the user shall see. Can be `"hour"`, `"minute"` or `"second"`.
      *
@@ -122,7 +123,7 @@
      */
     maxDetail?: Detail;
     /** Minimum date that the user can select. */
-    minDate?: Date;
+    minDate?: T;
     /** `aria-label` for the minute input. */
     minuteAriaLabel?: string;
     /**
@@ -152,7 +153,7 @@
     /** Function called when the calendar opens. */
     onCalendarOpen?: () => void;
     /** Function called when the user picks a valid datetime. */
-    onChange?: (value: Value) => void;
+    onChange?: (value: Value<T>) => void;
     /** Function called when the clock closes. */
     onClockClose?: () => void;
     /** Function called when the clock opens. */
@@ -214,7 +215,7 @@
      * @example [new Date(2017, 0, 1, 22, 15), new Date(2017, 0, 1, 23, 45)]
      * @example ["2017-01-01T22:15:00", "2017-01-01T23:45:00"]
      */
-    value?: LooseValue;
+    value?: LooseValue<T>;
     /** `aria-label` for the year input. */
     yearAriaLabel?: string;
     /**
@@ -277,7 +278,9 @@
     yearAriaLabel,
     yearPlaceholder,
     ...otherProps
-  }: DateTimeRangePickerProps = $props();
+  }: DateTimeRangePickerProps<T> = $props();
+
+  const adapter = getDateAdapter<T>('DateTimeRangePicker');
 
   let isCalendarOpen = $state<boolean | null>(untrack(() => isCalendarOpenProps));
   let isClockOpen = $state<boolean | null>(untrack(() => isClockOpenProps));
@@ -351,7 +354,7 @@
     closeClock({ reason });
   }
 
-  function onChange(nextValue: Value, shouldCloseWidgets = shouldCloseWidgetsOnSelect) {
+  function onChange(nextValue: Value<T>, shouldCloseWidgets = shouldCloseWidgetsOnSelect) {
     if (shouldCloseWidgets) {
       closeAllWidgets({ reason: 'select' });
     }
@@ -359,33 +362,34 @@
     onChangeProps?.(nextValue);
   }
 
-  function onChangeFrom(nextValueFrom: Date | null, shouldCloseWidgets: boolean) {
-    onChange([nextValueFrom, valueTo ? new Date(valueTo) : null], shouldCloseWidgets);
+  function onChangeFrom(nextValueFrom: T | null, shouldCloseWidgets: boolean) {
+    onChange([nextValueFrom, normalizeDate(valueTo)], shouldCloseWidgets);
+  }
+
+  function onChangeTo(nextValueTo: T | null, shouldCloseWidgets: boolean) {
+    onChange([normalizeDate(valueFrom), nextValueTo], shouldCloseWidgets);
   }
 
-  function onChangeTo(nextValueTo: Date | null, shouldCloseWidgets: boolean) {
-    onChange([valueFrom ? new Date(valueFrom) : null, nextValueTo], shouldCloseWidgets);
+  function normalizeDate(value: string | T | null | undefined): T | null {
+    if (value === null || value === undefined || value === '') return null;
+    return typeof value === 'string' ? adapter.date(value) : value;
   }
 
-  function withTimeOf(date: Date | null, source: string | Date | null | undefined): Date | null {
+  function withTimeOf(date: T | null, source: string | T | null | undefined): T | null {
     if (!source || !date) {
       return date;
     }
 
-    const sourceDate = new Date(source);
-    const result = new Date(date);
-
-    result.setHours(
-      sourceDate.getHours(),
-      sourceDate.getMinutes(),
-      sourceDate.getSeconds(),
-      sourceDate.getMilliseconds(),
-    );
+    const sourceDate = typeof source === 'string' ? adapter.date(source) : source;
+    let result = adapter.setHours(date, adapter.getHours(sourceDate));
+    result = adapter.setMinutes(result, adapter.getMinutes(sourceDate));
+    result = adapter.setSeconds(result, adapter.getSeconds(sourceDate));
+    result = adapter.setMilliseconds(result, adapter.getMilliseconds(sourceDate));
 
     return result;
   }
 
-  function onDateChange(nextValue: Value, shouldCloseWidgets?: boolean) {
+  function onDateChange(nextValue: Value<T>, shouldCloseWidgets?: boolean) {
     // The calendar passes an array of values when selectRange is enabled
     const [rawNextValueFrom, rawNextValueTo] = Array.isArray(nextValue) ? nextValue : [nextValue];
 
@@ -551,7 +555,7 @@
     {locale}
     {maxDate}
     {minDate}
-    onChange={(nextValue) => onDateChange(nextValue)}
+    onChange={(nextValue) => onDateChange(nextValue as Value<T>)}
     selectRange
     {value}
     {...calendarProps}
@@ -585,7 +589,8 @@
       {...commonInputProps}
       {autoFocus}
       name="{name}_from"
-      onChange={onChangeFrom}
+      onChange={(nextValue, shouldCloseWidgets) =>
+        onChangeFrom(nextValue as T | null, shouldCloseWidgets)}
       value={valueFrom}
     />
     <span class="{baseClassName}__range-divider" data-testid="range-divider">
@@ -598,7 +603,8 @@
     <DateTimeInput
       {...commonInputProps}
       name="{name}_to"
-      onChange={onChangeTo}
+      onChange={(nextValue, shouldCloseWidgets) =>
+        onChangeTo(nextValue as T | null, shouldCloseWidgets)}
       value={valueTo}
     />
     {#if clearIcon !== null}

package/src/shared/types.ts

@@ -6,12 +6,12 @@ export type CloseReason = 'buttonClick' | 'escape' | 'outsideAction' | 'select';
 
 export type Detail = 'hour' | 'minute' | 'second';
 
-type LooseValuePiece = string | Date | null;
+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 OpenReason = 'buttonClick' | 'focus';
 
-type ValuePiece = Date | null;
+type ValuePiece<T = Date> = T | null;
 
-export type Value = ValuePiece | Range<ValuePiece>;
+export type Value<T = Date> = ValuePiece<T> | Range<ValuePiece<T>>;