diff --git a/.changeset/giant-tigers-poke.md b/.changeset/giant-tigers-poke.md new file mode 100644 index 0000000000..e12ec0ab15 --- /dev/null +++ b/.changeset/giant-tigers-poke.md @@ -0,0 +1,7 @@ +--- +'@evidence-dev/core-components': minor +'my-evidence-project': minor +'@evidence-dev/components': minor +--- + +Add inputDefault prop to DateInput component to pick start or end of range as default diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte index 3b1b9a8a97..6c36046852 100644 --- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte +++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte @@ -45,6 +45,8 @@ /** @type {boolean| string} */ export let range = false; $: range = toBoolean(range); + /** @type {'start' | 'end'} */ + export let inputDefault = 'start'; let query; let errors = []; @@ -155,6 +157,7 @@ {currentDate} {title} {description} + {inputDefault} /> {/if} diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte index 4c30d94a75..7e375a8c46 100644 --- a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte +++ b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte @@ -55,6 +55,8 @@ export let extraDayEndString = undefined; /** @type {string | undefined} */ export let description = undefined; + /** @type {'start' | 'end'} */ + export let inputDefault = 'start'; /** @type { { label: string, group: string, range: import('bits-ui').DateRange }[] } */ $: presets = [ @@ -192,13 +194,13 @@ } } - function setPlaceholderDefault(d) { - placeholder = d; + function setPlaceholderDefault(d, defaultType) { + placeholder = defaultType === 'end' ? d : calendarStart; } let selectedPreset; let placeholder; - $: setPlaceholderDefault(calendarEnd); + $: setPlaceholderDefault(calendarEnd, inputDefault); // group exists check for nicely rendering group border for dropdown function groupExists(groupName) { @@ -244,7 +246,7 @@ if (range) { selectedDateInput = { start, end }; } else { - selectedDateInput = start; + selectedDateInput = inputDefault === 'end' ? end : start; } } $: updateDateRange(calendarStart, calendarEnd); diff --git a/sites/docs/pages/components/inputs/date-input/index.md b/sites/docs/pages/components/inputs/date-input/index.md index 8d097affc5..aea1ded3bd 100644 --- a/sites/docs/pages/components/inputs/date-input/index.md +++ b/sites/docs/pages/components/inputs/date-input/index.md @@ -293,12 +293,20 @@ Customize "Select a Range" drop down, by including present range options. **Rang Accepts preset in string format to apply default value in Date Input picker. **Range options**: `'Last 7 Days'` `'Last 30 Days'` `'Last 90 Days'` `'Last 3 Months'` `'Last 6 Months'` `'Last 12 Months'` `'Last Month'` `'Last Year'` `'Month to Date'` `'Year to Date'` `'All Time'` + + + + + + +# Date Picker with Default set to End + + + + +