[DatePickerField] Fix usage within form

.changeset/long-gifts-unite.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[DateField] Fix usage within <form>

.changeset/tricky-ducks-whisper.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[DatePickerField] Add hidden input for use within <form>

packages/svelte-ux/src/lib/components/DateField.svelte

@@ -13,6 +13,7 @@
   const { format: format_ux } = getSettings();
   const { classes: settingsClasses, defaults } = getComponentSettings('DateField');
 
+  export let name = '';
   export let value: Date | null = null;
   export let format: string | undefined = undefined;
   export let mask: string | undefined = undefined;
@@ -86,6 +87,7 @@
 >
   <Input
     {required}
+    {name}
     value={value ? formatDate(value, actualFormat) : inputValue}
     mask={actualMask}
     {replace}

packages/svelte-ux/src/lib/components/DatePickerField.svelte

@@ -18,6 +18,7 @@
   const dispatch = createEventDispatcher();
   const { classes: settingsClasses, defaults } = getComponentSettings('DatePickerField');
 
+  export let name = '';
   export let value: Date | null = null;
   export let periodType: PeriodType = PeriodType.Day;
   export let iconOnly: boolean = false;
@@ -88,6 +89,8 @@
     let:id
   >
     <span slot="prepend">
+      <input type="hidden" {name} {value} />
+
       {#if stepper}
         <Button
           icon={mdiChevronLeft}

packages/svelte-ux/src/lib/components/Input.svelte

@@ -13,6 +13,7 @@
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './theme.js';
 
+  export let name = '';
   export let value = '';
   export let type: HTMLInputTypeAttribute = 'text';
   export let inputmode: HTMLInputAttributes['inputmode'] | undefined = undefined;
@@ -117,6 +118,7 @@
 <input
   {id}
   {type}
+  {name}
   {value}
   {min}
   {max}

packages/svelte-ux/src/routes/docs/components/DateField/+page.svelte

@@ -102,3 +102,19 @@
   />
   value: {value}
 </Preview>
+
+<h2>within form</h2>
+
+<Preview>
+  <form
+    on:submit={(e) => {
+      e.preventDefault();
+      // @ts-expect-error
+      const formData = new FormData(e.target);
+      alert(formData.get('birth_date'));
+    }}
+  >
+    <DateField label="Birth date" name="birth_date" />
+    <Button type="submit">Submit</Button>
+  </form>
+</Preview>

packages/svelte-ux/src/routes/docs/components/DatePickerField/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { mdiCalendar } from '@mdi/js';
 
-  import { DatePickerField, PeriodType } from 'svelte-ux';
+  import { Button, DatePickerField, PeriodType } from 'svelte-ux';
   import Preview from '$lib/components/Preview.svelte';
 
   let value = new Date();
@@ -74,3 +74,19 @@
 <Preview>
   <DatePickerField label="Start Date" clearable />
 </Preview>
+
+<h2>within form</h2>
+
+<Preview>
+  <form
+    on:submit={(e) => {
+      e.preventDefault();
+      // @ts-expect-error
+      const formData = new FormData(e.target);
+      alert(formData.get('start_date'));
+    }}
+  >
+    <DatePickerField label="Start Date" name="start_date" clearable />
+    <Button type="submit">Submit</Button>
+  </form>
+</Preview>

packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte

@@ -527,7 +527,7 @@
   <SelectField {options} icon={mdiMagnify} bind:value inlineOptions={true} />
 </Preview>
 
-<h2>with form</h2>
+<h2>within form</h2>
 
 <Preview>
   <form