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
+
+
+
+
+