svelte-date-input 0.0.0-stage → 0.2.0

package/src/SegmentedInput.svelte

@@ -0,0 +1,363 @@
+<script lang="ts">
+  import { getDaysInMonth } from 'svelte-date-utils';
+  import { getUserLocale } from 'get-user-locale';
+  import { onMount, untrack } from 'svelte';
+
+  import Divider from './Divider.svelte';
+  import SegmentInput from './SegmentInput.svelte';
+  import SegmentSelect from './SegmentSelect.svelte';
+  import {
+    composeDate,
+    emptyFields,
+    fieldBySegment,
+    fieldsFromDate,
+    formatTime,
+    fromNativeValue,
+    toNativeValue,
+    valueToDate,
+  } from './shared/fields.js';
+  import {
+    getAmPmLabels,
+    getDefaultFormatParts,
+    getMonthNames,
+    parseFormat,
+  } from './shared/format.js';
+
+  import type { Fields } from './shared/fields.js';
+  import type { InputDetail, InputKind, LooseValuePiece, SegmentName } from './shared/types.js';
+
+  type SegmentedInputProps = {
+    /** `aria-label` for the AM/PM select. */
+    amPmAriaLabel?: string;
+    /** Automatically focuses the first field on mount. */
+    autoFocus?: boolean;
+    /** Base class name. Fields get `${className}__input`, dividers get `${className}__divider`, and so on. */
+    className?: string;
+    /** `form` attribute for the custom fields (but not the native input). */
+    customInputsForm?: string;
+    dayAriaLabel?: string;
+    /** @default '--' */
+    dayPlaceholder?: string;
+    disabled?: boolean;
+    /**
+     * Input format based on Unicode Technical Standard #35. Supported tokens: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`, `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`.
+     */
+    format?: string;
+    hourAriaLabel?: string;
+    /** @default '--' */
+    hourPlaceholder?: string;
+    /** Which kind of value the input edits. */
+    kind: InputKind;
+    locale?: string;
+    maxDate?: Date;
+    /** The most detailed field the user shall see. */
+    maxDetail?: InputDetail;
+    minDate?: Date;
+    minuteAriaLabel?: string;
+    /** @default '--' */
+    minutePlaceholder?: string;
+    monthAriaLabel?: string;
+    /** @default '--' */
+    monthPlaceholder?: string;
+    /** `name` of the native input. */
+    name?: string;
+    nativeInputAriaLabel?: string;
+    /** Called when the value changes. For the `time` kind, the value is an `HH:mm[:ss]` string. */
+    onChange?: (value: Date | string | null, shouldCloseWidgets: boolean) => void;
+    /** Called when the fields contain an incomplete or invalid value. */
+    onInvalidChange?: () => void;
+    required?: boolean;
+    secondAriaLabel?: string;
+    /** @default '--' */
+    secondPlaceholder?: string;
+    showLeadingZeros?: boolean;
+    value?: LooseValuePiece;
+    yearAriaLabel?: string;
+    /** @default '----' */
+    yearPlaceholder?: string;
+  };
+
+  let {
+    amPmAriaLabel,
+    autoFocus,
+    className = '',
+    customInputsForm,
+    dayAriaLabel,
+    dayPlaceholder = '--',
+    disabled,
+    format,
+    hourAriaLabel,
+    hourPlaceholder = '--',
+    kind,
+    locale,
+    maxDate,
+    maxDetail,
+    minDate,
+    minuteAriaLabel,
+    minutePlaceholder = '--',
+    monthAriaLabel,
+    monthPlaceholder = '--',
+    name,
+    nativeInputAriaLabel,
+    onChange,
+    onInvalidChange,
+    required,
+    secondAriaLabel,
+    secondPlaceholder = '--',
+    showLeadingZeros = false,
+    value,
+    yearAriaLabel,
+    yearPlaceholder = '----',
+  }: SegmentedInputProps = $props();
+
+  let root = $state<HTMLDivElement>();
+
+  const resolvedLocale = $derived(locale ?? getUserLocale());
+  const detail = $derived<InputDetail>(maxDetail ?? (kind === 'date' ? 'month' : 'minute'));
+  const parts = $derived(
+    format ? parseFormat(format) : getDefaultFormatParts(resolvedLocale, kind, detail),
+  );
+  const present = $derived(
+    new Set(parts.flatMap((part) => (part.type === 'segment' ? [part.segment] : []))),
+  );
+  const use12Hours = $derived(present.has('hour12'));
+  const dividers = $derived(
+    [...new Set(parts.flatMap((part) => (part.type === 'literal' ? [...part.text] : [])))]
+      .filter((character) => !/\d/.test(character))
+      .join(''),
+  );
+
+  const amPmLabels = $derived(getAmPmLabels(resolvedLocale));
+  const amPmOptions = $derived([
+    { label: amPmLabels[0], value: 'am' },
+    { label: amPmLabels[1], value: 'pm' },
+  ]);
+
+  let fields = $state<Fields>(emptyFields());
+
+  const dateValue = $derived(valueToDate(value, kind));
+  // Primitive key, so that parents passing equal-but-new Date objects don't reset the fields
+  const valueKey = $derived(
+    dateValue
+      ? kind === 'time'
+        ? dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()
+        : dateValue.getTime()
+      : null,
+  );
+
+  $effect(() => {
+    void valueKey;
+    const twelveHours = use12Hours;
+
+    untrack(() => {
+      fields = dateValue ? fieldsFromDate(dateValue, twelveHours) : emptyFields();
+    });
+  });
+
+  function emit(date: Date): Date | string {
+    return kind === 'time' ? formatTime(date, detail) : date;
+  }
+
+  function process(nextFields: Fields) {
+    fields = nextFields;
+
+    const result = composeDate({
+      detail,
+      fields: nextFields,
+      max: kind === 'time' ? undefined : maxDate,
+      min: kind === 'time' ? undefined : minDate,
+      present,
+      use12Hours,
+    });
+
+    switch (result.status) {
+      case 'empty':
+        if (valueKey !== null) {
+          onChange?.(null, false);
+        }
+        break;
+      case 'valid':
+        onChange?.(emit(result.date), false);
+        break;
+      default:
+        onInvalidChange?.();
+    }
+  }
+
+  function setField(field: keyof Fields, next: string) {
+    process({ ...fields, [field]: next });
+  }
+
+  function onNativeChange(event: Event & { currentTarget: HTMLInputElement }) {
+    const date = fromNativeValue(event.currentTarget.value, kind);
+
+    if (date) {
+      fields = fieldsFromDate(date, use12Hours);
+      onChange?.(emit(date), false);
+    } else {
+      fields = emptyFields();
+      onChange?.(null, false);
+    }
+  }
+
+  function navigate(element: HTMLElement, direction: -1 | 1) {
+    const segments = [...(root?.querySelectorAll<HTMLElement>('[data-segment]') ?? [])];
+    const target = segments[segments.indexOf(element) + direction];
+
+    if (target) {
+      target.focus();
+    }
+  }
+
+  onMount(() => {
+    if (autoFocus) {
+      root?.querySelector<HTMLElement>('[data-segment]')?.focus();
+    }
+  });
+
+  const nativeType = $derived(
+    kind === 'date' ? 'date' : kind === 'time' ? 'time' : 'datetime-local',
+  );
+  const nativeStep = $derived(
+    kind === 'date' ? undefined : detail === 'second' ? 1 : detail === 'hour' ? 3600 : 60,
+  );
+  const nativeValue = $derived(dateValue ? toNativeValue(dateValue, kind, detail) : '');
+  const nativeMin = $derived(
+    minDate && kind !== 'time' ? toNativeValue(minDate, kind, detail) : undefined,
+  );
+  const nativeMax = $derived(
+    maxDate && kind !== 'time' ? toNativeValue(maxDate, kind, detail) : undefined,
+  );
+
+  const ariaLabels = $derived<Record<SegmentName, string | undefined>>({
+    amPm: amPmAriaLabel,
+    day: dayAriaLabel,
+    hour12: hourAriaLabel,
+    hour24: hourAriaLabel,
+    minute: minuteAriaLabel,
+    month: monthAriaLabel,
+    second: secondAriaLabel,
+    year: yearAriaLabel,
+  });
+
+  const placeholders = $derived<Record<SegmentName, string>>({
+    amPm: '--',
+    day: dayPlaceholder,
+    hour12: hourPlaceholder,
+    hour24: hourPlaceholder,
+    minute: minutePlaceholder,
+    month: monthPlaceholder,
+    second: secondPlaceholder,
+    year: yearPlaceholder,
+  });
+
+  function getBounds(segment: SegmentName): { max: number; maxLength: number; min: number } {
+    switch (segment) {
+      case 'year':
+        return {
+          max: maxDate && kind !== 'time' ? maxDate.getFullYear() : 275760,
+          maxLength: 4,
+          min: minDate && kind !== 'time' ? minDate.getFullYear() : 1,
+        };
+      case 'month':
+        return { max: 12, maxLength: 2, min: 1 };
+      case 'day': {
+        const year = Number(fields.year);
+        const month = Number(fields.month);
+        const daysInMonth =
+          fields.year && fields.month && month >= 1 && month <= 12
+            ? getDaysInMonth(new Date(year, month - 1, 1))
+            : 31;
+
+        return { max: daysInMonth, maxLength: 2, min: 1 };
+      }
+      case 'hour12':
+        return { max: 12, maxLength: 2, min: 1 };
+      case 'hour24':
+        return { max: 23, maxLength: 2, min: 0 };
+      case 'minute':
+      case 'second':
+        return { max: 59, maxLength: 2, min: 0 };
+      default:
+        return { max: 0, maxLength: 0, min: 0 };
+    }
+  }
+
+  function getMonthOptions(token: string) {
+    return getMonthNames(resolvedLocale, token === 'MMM' ? 'short' : 'long').map(
+      (label, index) => ({
+        label,
+        value: String(index + 1),
+      }),
+    );
+  }
+</script>
+
+<div bind:this={root} class={className}>
+  <input
+    aria-label={nativeInputAriaLabel}
+    {disabled}
+    max={nativeMax}
+    min={nativeMin}
+    {name}
+    onchange={onNativeChange}
+    {required}
+    step={nativeStep}
+    style="visibility: hidden; position: absolute; z-index: -999;"
+    type={nativeType}
+    value={nativeValue}
+  />
+  {#each parts as part, index (index)}
+    {#if part.type === 'literal'}
+      <Divider class="{className}__divider" text={part.text} />
+    {:else if part.segment === 'amPm'}
+      <SegmentSelect
+        ariaLabel={ariaLabels.amPm}
+        {className}
+        {disabled}
+        form={customInputsForm}
+        name="amPm"
+        onChange={(next) => setField('amPm', next)}
+        onNavigate={navigate}
+        options={amPmOptions}
+        placeholder={placeholders.amPm}
+        {required}
+        value={fields.amPm}
+      />
+    {:else if part.segment === 'month' && part.token.length >= 3}
+      <SegmentSelect
+        ariaLabel={ariaLabels.month}
+        {className}
+        {disabled}
+        form={customInputsForm}
+        name="month"
+        onChange={(next) => setField('month', next)}
+        onNavigate={navigate}
+        options={getMonthOptions(part.token)}
+        placeholder={placeholders.month}
+        {required}
+        value={fields.month}
+      />
+    {:else}
+      {@const bounds = getBounds(part.segment)}
+      {@const field = fieldBySegment[part.segment]}
+      <SegmentInput
+        ariaLabel={ariaLabels[part.segment]}
+        {className}
+        {disabled}
+        {dividers}
+        form={customInputsForm}
+        max={bounds.max}
+        maxLength={bounds.maxLength}
+        min={bounds.min}
+        name={part.segment}
+        onChange={(next) => setField(field, next)}
+        onNavigate={navigate}
+        placeholder={placeholders[part.segment]}
+        {required}
+        showLeadingZeros={part.segment !== 'year' && (showLeadingZeros || part.token.length === 2)}
+        value={fields[field]}
+      />
+    {/if}
+  {/each}
+</div>

package/src/index.ts

@@ -0,0 +1,28 @@
+import DateInput from './DateInput.svelte';
+import Divider from './Divider.svelte';
+import SegmentedInput from './SegmentedInput.svelte';
+import SegmentInput from './SegmentInput.svelte';
+import SegmentSelect from './SegmentSelect.svelte';
+
+import type { ComponentProps } from 'svelte';
+
+export type DateInputProps = ComponentProps<typeof DateInput>;
+export type SegmentedInputProps = ComponentProps<typeof SegmentedInput>;
+export type {
+  DateDetail,
+  InputDetail,
+  InputKind,
+  LooseValuePiece,
+  SegmentName,
+  TimeDetail,
+} from './shared/types.js';
+export type { FormatPart } from './shared/format.js';
+export {
+  getAmPmLabels,
+  getDefaultFormatParts,
+  getMonthNames,
+  parseFormat,
+} from './shared/format.js';
+export { DateInput, Divider, SegmentedInput, SegmentInput, SegmentSelect };
+
+export default DateInput;

package/src/shared/fields.ts

@@ -0,0 +1,245 @@
+import { getISOLocalDate, getISOLocalDateTime } from 'svelte-date-utils';
+
+import type { InputDetail, InputKind, LooseValuePiece, SegmentName } from './types.js';
+
+export type Fields = {
+  amPm: '' | 'am' | 'pm';
+  day: string;
+  hour: string;
+  minute: string;
+  month: string;
+  second: string;
+  year: string;
+};
+
+export type FieldName = keyof Fields;
+
+export const fieldBySegment: Record<SegmentName, FieldName> = {
+  amPm: 'amPm',
+  day: 'day',
+  hour12: 'hour',
+  hour24: 'hour',
+  minute: 'minute',
+  month: 'month',
+  second: 'second',
+  year: 'year',
+};
+
+export function emptyFields(): Fields {
+  return { amPm: '', day: '', hour: '', minute: '', month: '', second: '', year: '' };
+}
+
+export function fieldsFromDate(date: Date, use12Hours: boolean): Fields {
+  const hours = date.getHours();
+
+  return {
+    amPm: hours >= 12 ? 'pm' : 'am',
+    day: String(date.getDate()),
+    hour: String(use12Hours ? hours % 12 || 12 : hours),
+    minute: String(date.getMinutes()),
+    month: String(date.getMonth() + 1),
+    second: String(date.getSeconds()),
+    year: String(date.getFullYear()),
+  };
+}
+
+function floorTo(date: Date, detail: InputDetail): Date {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const day = date.getDate();
+
+  switch (detail) {
+    case 'year':
+      return new Date(year, 0, 1);
+    case 'month':
+      return new Date(year, month, day);
+    case 'hour':
+      return new Date(year, month, day, date.getHours());
+    case 'minute':
+      return new Date(year, month, day, date.getHours(), date.getMinutes());
+    case 'second':
+      return new Date(year, month, day, date.getHours(), date.getMinutes(), date.getSeconds());
+  }
+}
+
+export type ComposeResult =
+  | { status: 'empty' }
+  | { status: 'partial' }
+  | { status: 'invalid' }
+  | { status: 'valid'; date: Date };
+
+type ComposeOptions = {
+  detail: InputDetail;
+  fields: Fields;
+  max?: Date;
+  min?: Date;
+  present: ReadonlySet<SegmentName>;
+  use12Hours: boolean;
+};
+
+/**
+ * Builds a Date from field values. Fields excluded from the format fall back to
+ * the current year, January, the 1st, and 00:00:00.
+ */
+export function composeDate({
+  detail,
+  fields,
+  max,
+  min,
+  present,
+  use12Hours,
+}: ComposeOptions): ComposeResult {
+  const names = [...new Set([...present].map((segment) => fieldBySegment[segment]))];
+  const filled = names.filter((name) => fields[name] !== '');
+
+  if (filled.length === 0) {
+    return { status: 'empty' };
+  }
+
+  if (filled.length < names.length) {
+    return { status: 'partial' };
+  }
+
+  const hasHour = present.has('hour12') || present.has('hour24');
+  const year = present.has('year') ? Number(fields.year) : new Date().getFullYear();
+  const month = present.has('month') ? Number(fields.month) - 1 : 0;
+  const day = present.has('day') ? Number(fields.day) : 1;
+  let hour = hasHour ? Number(fields.hour) : 0;
+  const minute = present.has('minute') ? Number(fields.minute) : 0;
+  const second = present.has('second') ? Number(fields.second) : 0;
+
+  const numbers = [year, month, day, hour, minute, second];
+
+  if (numbers.some((value) => !Number.isInteger(value))) {
+    return { status: 'invalid' };
+  }
+
+  if (use12Hours) {
+    if (hour < 1 || hour > 12) {
+      return { status: 'invalid' };
+    }
+
+    hour = (hour % 12) + (fields.amPm === 'pm' ? 12 : 0);
+  } else if (hour < 0 || hour > 23) {
+    return { status: 'invalid' };
+  }
+
+  if (year < 1 || month < 0 || month > 11 || day < 1 || day > 31) {
+    return { status: 'invalid' };
+  }
+
+  if (minute < 0 || minute > 59 || second < 0 || second > 59) {
+    return { status: 'invalid' };
+  }
+
+  const date = new Date(0);
+  date.setFullYear(year, month, day);
+  date.setHours(hour, minute, second, 0);
+
+  if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
+    return { status: 'invalid' };
+  }
+
+  const floored = floorTo(date, detail).getTime();
+
+  if (
+    (min && floored < floorTo(min, detail).getTime()) ||
+    (max && floored > floorTo(max, detail).getTime())
+  ) {
+    return { status: 'invalid' };
+  }
+
+  return { date, status: 'valid' };
+}
+
+function pad(value: number): string {
+  return String(value).padStart(2, '0');
+}
+
+export function parseTime(
+  value: string,
+): { hours: number; minutes: number; seconds: number } | null {
+  const match = /^(\d{1,2}):(\d{2})(?::(\d{2}))?/.exec(value);
+
+  if (!match) {
+    return null;
+  }
+
+  return {
+    hours: Number(match[1]),
+    minutes: Number(match[2]),
+    seconds: Number(match[3] ?? 0),
+  };
+}
+
+export function formatTime(date: Date, detail: InputDetail): string {
+  const time = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+
+  return detail === 'second' ? `${time}:${pad(date.getSeconds())}` : time;
+}
+
+/**
+ * Converts a loose value to a Date. For the `time` kind, `"HH:mm[:ss]"` strings are
+ * accepted and resolved against today's date.
+ */
+export function valueToDate(value: LooseValuePiece | undefined, kind: InputKind): Date | null {
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+
+  if (kind === 'time' && typeof value === 'string') {
+    const time = parseTime(value);
+
+    if (!time) {
+      return null;
+    }
+
+    const date = new Date();
+    date.setHours(time.hours, time.minutes, time.seconds, 0);
+
+    return date;
+  }
+
+  const date = value instanceof Date ? value : new Date(value);
+
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+export function toNativeValue(date: Date, kind: InputKind, detail: InputDetail): string {
+  switch (kind) {
+    case 'date':
+      return getISOLocalDate(date);
+    case 'time':
+      return formatTime(date, detail);
+    case 'datetime':
+      return getISOLocalDateTime(date).slice(0, detail === 'second' ? 19 : 16);
+  }
+}
+
+export function fromNativeValue(value: string, kind: InputKind): Date | null {
+  if (!value) {
+    return null;
+  }
+
+  if (kind === 'time') {
+    return valueToDate(value, 'time');
+  }
+
+  if (kind === 'date') {
+    const [year, month, day] = value.split('-').map(Number);
+
+    if (!year || !month || !day) {
+      return null;
+    }
+
+    const date = new Date(0);
+    date.setFullYear(year, month - 1, day);
+    date.setHours(0, 0, 0, 0);
+
+    return date;
+  }
+
+  const date = new Date(value);
+
+  return Number.isNaN(date.getTime()) ? null : date;
+}