svelte-date-input 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2018–2026 Wojciech Maj
+Copyright (c) 2026 Adhi Ravishankar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,43 @@
-# Temporary Holding Version
+# svelte-date-input
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Segmented date input fields for your Svelte 5 app, plus the engine shared with [svelte-time-input](../svelte-time-input) and [svelte-datetime-input](../svelte-datetime-input). Svelte port of the input part of [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker).
+
+The component renders a native `<input type="date">` (hidden, used for form submission and validation) and one field per format token. Fields move focus automatically while typing and on arrow keys, and the value is only reported once all fields form a valid date.
+
+## Installation
+
+```sh
+npm install svelte-date-input
+```
+
+Requires Svelte 5 or later.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import DateInput from 'svelte-date-input';
+
+  let value = $state<Date | null>(new Date());
+</script>
+
+<DateInput name="date" onChange={(nextValue) => (value = nextValue)} {value} />
+```
+
+## Props
+
+`className`, `customInputsForm`, `disabled`, `format`, `locale`, `maxDate`, `minDate`, `name`, `nativeInputAriaLabel`, `onChange(value, shouldCloseWidgets)`, `onInvalidChange`, `required`, `showLeadingZeros`, `value`, `autoFocus`, `dayAriaLabel`, `monthAriaLabel`, `yearAriaLabel`, `dayPlaceholder`, `monthPlaceholder`, `yearPlaceholder`, and `maxDetail` (`"month"` by default, or `"year"`). They behave like the props of [svelte-datetimerange-picker](../svelte-datetimerange-picker).
+
+Fields get class names `${className}__input`, `${className}__day` (and `__month`, `__year`, …), `${className}__divider` and `${className}__leadingZero`.
+
+## Building blocks
+
+`SegmentedInput` (with a `kind` of `"date"`, `"time"` or `"datetime"`), `SegmentInput`, `SegmentSelect`, `Divider`, and the `parseFormat`, `getDefaultFormatParts`, `getMonthNames` and `getAmPmLabels` helpers are exported for building other inputs.
+
+## Part of a monorepo
+
+`svelte-date-input` is part of the [svelte-datetime-pickers monorepo](https://github.com/adhiravishankar/svelte-datetime-pickers). See the [live demo and Storybook](https://adhiravishankar.github.io/svelte-datetime-pickers/).
+
+## License
+
+The MIT License.

package/dist/DateInput.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import SegmentedInput from './SegmentedInput.svelte';
+
+  import type { ComponentProps } from 'svelte';
+  import type { DateDetail, LooseValuePiece } from './shared/types.js';
+
+  type DateInputProps = Omit<
+    ComponentProps<typeof SegmentedInput>,
+    | 'hourAriaLabel'
+    | 'hourPlaceholder'
+    | 'kind'
+    | 'maxDetail'
+    | 'minuteAriaLabel'
+    | 'minutePlaceholder'
+    | 'onChange'
+    | 'secondAriaLabel'
+    | 'secondPlaceholder'
+    | 'amPmAriaLabel'
+    | 'value'
+  > & {
+    /**
+     * The most detailed field the user shall see.
+     *
+     * @default 'month'
+     */
+    maxDetail?: DateDetail;
+    onChange?: (value: Date | null, shouldCloseWidgets: boolean) => void;
+    value?: LooseValuePiece;
+  };
+
+  let { onChange, ...props }: DateInputProps = $props();
+</script>
+
+<SegmentedInput
+  {...props}
+  kind="date"
+  onChange={(value, shouldCloseWidgets) => onChange?.(value as Date | null, shouldCloseWidgets)}
+/>

package/dist/DateInput.svelte.d.ts

@@ -0,0 +1,16 @@
+import SegmentedInput from './SegmentedInput.svelte';
+import type { ComponentProps } from 'svelte';
+import type { DateDetail, LooseValuePiece } from './shared/types.js';
+type DateInputProps = Omit<ComponentProps<typeof SegmentedInput>, 'hourAriaLabel' | 'hourPlaceholder' | 'kind' | 'maxDetail' | 'minuteAriaLabel' | 'minutePlaceholder' | 'onChange' | 'secondAriaLabel' | 'secondPlaceholder' | 'amPmAriaLabel' | 'value'> & {
+    /**
+     * The most detailed field the user shall see.
+     *
+     * @default 'month'
+     */
+    maxDetail?: DateDetail;
+    onChange?: (value: Date | null, shouldCloseWidgets: boolean) => void;
+    value?: LooseValuePiece;
+};
+declare const DateInput: import("svelte").Component<DateInputProps, {}, "">;
+type DateInput = ReturnType<typeof DateInput>;
+export default DateInput;

package/dist/Divider.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  type DividerProps = {
+    class: string;
+    text: string;
+  };
+
+  let { class: className, text }: DividerProps = $props();
+
+  // Keep whitespace from collapsing between input fields
+  const content = $derived(text.replace(/[  ]/g, ' '));
+</script>
+
+<span class={className}>{content}</span>

package/dist/Divider.svelte.d.ts

@@ -0,0 +1,7 @@
+type DividerProps = {
+    class: string;
+    text: string;
+};
+declare const Divider: import("svelte").Component<DividerProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/SegmentInput.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  type SegmentInputProps = {
+    ariaLabel?: string;
+    /** Base class name; the input gets `${className}__input` and `${className}__${name}`. */
+    className: string;
+    disabled?: boolean;
+    /** Characters that move focus to the next field when typed. */
+    dividers?: string;
+    form?: string;
+    max: number;
+    maxLength: number;
+    min: number;
+    name: string;
+    onChange: (value: string) => void;
+    onNavigate: (element: HTMLElement, direction: -1 | 1) => void;
+    placeholder: string;
+    required?: boolean;
+    showLeadingZeros?: boolean;
+    value: string;
+  };
+
+  let {
+    ariaLabel,
+    className,
+    disabled,
+    dividers = '',
+    form,
+    max,
+    maxLength,
+    min,
+    name,
+    onChange,
+    onNavigate,
+    placeholder,
+    required,
+    showLeadingZeros = false,
+    value,
+  }: SegmentInputProps = $props();
+
+  const hasLeadingZero = $derived(showLeadingZeros && value !== '' && Number(value) < 10);
+
+  function onInput(event: Event & { currentTarget: HTMLInputElement }) {
+    const element = event.currentTarget;
+    const raw = element.value.replace(/\D/g, '');
+    const normalized = raw === '' ? '' : String(Number(raw));
+
+    element.value = normalized;
+    onChange(normalized);
+
+    if (raw.length >= maxLength || (raw !== '' && Number(raw) * 10 > max)) {
+      onNavigate(element, 1);
+    }
+  }
+
+  function onKeyDown(event: KeyboardEvent & { currentTarget: HTMLInputElement }) {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+
+    const element = event.currentTarget;
+
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.preventDefault();
+      onNavigate(element, event.key === 'ArrowLeft' ? -1 : 1);
+    } else if (event.key === 'Backspace' && element.value === '') {
+      event.preventDefault();
+      onNavigate(element, -1);
+    } else if (event.key.length === 1 && dividers.includes(event.key)) {
+      event.preventDefault();
+      onNavigate(element, 1);
+    }
+  }
+
+  function onFocus(event: FocusEvent & { currentTarget: HTMLInputElement }) {
+    event.currentTarget.select();
+  }
+</script>
+
+{#if hasLeadingZero}
+  <span class="{className}__leadingZero">0</span>
+{/if}
+<input
+  aria-label={ariaLabel}
+  class={[
+    `${className}__input`,
+    `${className}__${name.replace(/12|24/, '')}`,
+    hasLeadingZero && `${className}__input--hasLeadingZero`,
+  ]}
+  data-input="true"
+  data-segment={name}
+  {disabled}
+  {form}
+  inputmode="numeric"
+  {max}
+  {min}
+  {name}
+  oninput={onInput}
+  onfocus={onFocus}
+  onkeydown={onKeyDown}
+  {placeholder}
+  {required}
+  step="1"
+  style:width="{Math.max(1, (value || placeholder).length)}ch"
+  type="number"
+  {value}
+/>

package/dist/SegmentInput.svelte.d.ts

@@ -0,0 +1,22 @@
+type SegmentInputProps = {
+    ariaLabel?: string;
+    /** Base class name; the input gets `${className}__input` and `${className}__${name}`. */
+    className: string;
+    disabled?: boolean;
+    /** Characters that move focus to the next field when typed. */
+    dividers?: string;
+    form?: string;
+    max: number;
+    maxLength: number;
+    min: number;
+    name: string;
+    onChange: (value: string) => void;
+    onNavigate: (element: HTMLElement, direction: -1 | 1) => void;
+    placeholder: string;
+    required?: boolean;
+    showLeadingZeros?: boolean;
+    value: string;
+};
+declare const SegmentInput: import("svelte").Component<SegmentInputProps, {}, "">;
+type SegmentInput = ReturnType<typeof SegmentInput>;
+export default SegmentInput;

package/dist/SegmentSelect.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  type SegmentSelectProps = {
+    ariaLabel?: string;
+    className: string;
+    disabled?: boolean;
+    form?: string;
+    name: string;
+    onChange: (value: string) => void;
+    onNavigate: (element: HTMLElement, direction: -1 | 1) => void;
+    options: { label: string; value: string }[];
+    placeholder: string;
+    required?: boolean;
+    value: string;
+  };
+
+  let {
+    ariaLabel,
+    className,
+    disabled,
+    form,
+    name,
+    onChange,
+    onNavigate,
+    options,
+    placeholder,
+    required,
+    value,
+  }: SegmentSelectProps = $props();
+
+  function onKeyDown(event: KeyboardEvent & { currentTarget: HTMLSelectElement }) {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.preventDefault();
+      onNavigate(event.currentTarget, event.key === 'ArrowLeft' ? -1 : 1);
+    }
+  }
+</script>
+
+<select
+  aria-label={ariaLabel}
+  class={[`${className}__input`, `${className}__${name}`]}
+  data-input="true"
+  data-segment={name}
+  data-select="true"
+  {disabled}
+  {form}
+  {name}
+  onchange={(event) => onChange(event.currentTarget.value)}
+  onkeydown={onKeyDown}
+  {required}
+  {value}
+>
+  <option value="">{placeholder}</option>
+  {#each options as option (option.value)}
+    <option value={option.value}>{option.label}</option>
+  {/each}
+</select>

package/dist/SegmentSelect.svelte.d.ts

@@ -0,0 +1,19 @@
+type SegmentSelectProps = {
+    ariaLabel?: string;
+    className: string;
+    disabled?: boolean;
+    form?: string;
+    name: string;
+    onChange: (value: string) => void;
+    onNavigate: (element: HTMLElement, direction: -1 | 1) => void;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    placeholder: string;
+    required?: boolean;
+    value: string;
+};
+declare const SegmentSelect: import("svelte").Component<SegmentSelectProps, {}, "">;
+type SegmentSelect = ReturnType<typeof SegmentSelect>;
+export default SegmentSelect;