Update id prop & docs

Author: probablykasper

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Next
 - Add `required` prop (@ChromuSx)
+- Add `id` prop (@portfolioris)
 
 ## 2.9.0 - 2023 Nov 3
 - Add `timePrecision` prop for showing a time picker (@nihanmubashshir)

src/lib/DateInput.svelte

@@ -42,8 +42,8 @@
 	export let min = new Date(defaultDate.getFullYear() - 20, 0, 1)
 	/** The latest value the user can select */
 	export let max = new Date(defaultDate.getFullYear(), 11, 31, 23, 59, 59, 999)
-	/** optional id attribute */
-	export let id = ''
+	/** Set the input element's ID attribute */
+	export let id: string | null = null
 	/** Placeholder text to show when input field is empty */
 	export let placeholder = '2020-12-31 23:00:00'
 	/** Whether the text is valid */
@@ -191,7 +191,7 @@
 		class:invalid={!valid}
 		type="text"
 		value={text}
-		id={id || null}
+		{id}
 		{placeholder}
 		{disabled}
 		{required}

src/routes/docs/+page.md

@@ -29,22 +29,23 @@ The component will not assign a date value until a specific date is selected in
 
 <h3 id="props">Props</h3>
 
-| Prop                     | Type                                          | Description                                                 |
-| :----------------------- | :-------------------------------------------- | :---------------------------------------------------------- |
-| `value`                  | Date \| null                                  | Date value                                                  |
-| `min`                    | Date                                          | The earliest value the user can select                      |
-| `max`                    | Date                                          | The latest value the user can select                        |
-| `placeholder`            | string                                        | Placeholder used when date value is null                    |
-| `timePrecision`          | "minute" \| "second" \| "millisecond" \| null | Show a time picker with the specified precision             |
-| `valid`                  | bool                                          | Whether the text is valid                                   |
-| `format`                 | string                                        | Format string                                               |
-| `visible`                | bool                                          | Whether the date popup is visible                           |
-| `disabled`               | bool                                          | Disable the input                                           |
-| `required`               | bool                                          | Require a value to submit form                              |
-| `closeOnSelection`       | bool                                          | Close the date popup when a date is selected                |
-| `browseWithoutSelecting` | bool                                          | Wait with updating the date until a value is selected       |
-| `dynamicPositioning`     | bool                                          | Dynamicly postions the date popup to best fit on the screen |
-| `locale`                 | Locale                                        | Locale object for internationalization                      |
+| Prop                     | Type                                          | Description                                                   |
+| :----------------------- | :-------------------------------------------- | :------------------------------------------------------------ |
+| `value`                  | Date \| null                                  | Date value                                                    |
+| `min`                    | Date                                          | The earliest value the user can select                        |
+| `max`                    | Date                                          | The latest value the user can select                          |
+| `placeholder`            | string                                        | Placeholder used when date value is null                      |
+| `timePrecision`          | "minute" \| "second" \| "millisecond" \| null | Show a time picker with the specified precision               |
+| `id`                     | string \| null                                | Set the input element's ID attribute                          |
+| `valid`                  | bool                                          | Whether the text is valid                                     |
+| `format`                 | string                                        | Format string                                                 |
+| `visible`                | bool                                          | Whether the date popup is visible                             |
+| `disabled`               | bool                                          | Disable the input                                             |
+| `required`               | bool                                          | Require a value to submit form                                |
+| `closeOnSelection`       | bool                                          | Close the date popup when a date is selected                  |
+| `browseWithoutSelecting` | bool                                          | Wait with updating the date until a value is selected         |
+| `dynamicPositioning`     | bool                                          | Dynamically postions the date popup to best fit on the screen |
+| `locale`                 | Locale                                        | Locale object for internationalization                        |
 
 <h4 id="format-string">Format string</h4>