add id (#77)

Author: portfolioris

src/lib/DateInput.svelte

@@ -42,6 +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 = ''
 	/** Placeholder text to show when input field is empty */
 	export let placeholder = '2020-12-31 23:00:00'
 	/** Whether the text is valid */
@@ -189,6 +191,7 @@
 		class:invalid={!valid}
 		type="text"
 		value={text}
+		id={id || null}
 		{placeholder}
 		{disabled}
 		{required}

src/lib/DatePicker.svelte

@@ -38,7 +38,6 @@
 
 	/** Show a time picker with the specified precision */
 	export let timePrecision: 'minute' | 'second' | 'millisecond' | null = null
-
 	/** The earliest year the user can select */
 	export let min = new Date(defaultDate.getFullYear() - 20, 0, 1)
 	/** The latest year the user can select */

src/routes/DateInput.svelte

@@ -3,6 +3,7 @@
 	import Prop from './prop.svelte'
 	import Split from './split.svelte'
 
+	let id: string
 	let placeholder: string
 	let value: Date
 	let min: Date
@@ -21,6 +22,7 @@
 <Split>
 	<DateInput
 		slot="left"
+		bind:id
 		bind:value
 		bind:min
 		bind:max
@@ -41,6 +43,7 @@
 		<Prop label="value">{value}</Prop>
 		<Prop label="min" bind:value={min} />
 		<Prop label="max" bind:value={max} />
+		<Prop label="id" bind:value={id} />
 		<Prop label="placeholder" bind:value={placeholder} />
 		<Prop label="valid" bind:value={valid} />
 		<Prop label="format" bind:value={format} />