Allow setting DateInput default as start or end

.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

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}
 				/>
 			</QueryLoad>
 		{/if}

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);

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'`
 
 </PropListing>
+<PropListing 
+    name="inputDefault"
+    description="When used as a single date picker, determines whether the start or end date is selected by default"
+    options={["start", "end"]}
+    default="start"
+/>
+
 <PropListing 
     name="hideDuringPrint"
     description="Hide the component when the report is printed"
     options={["true", "false"]}
     default="true"
 />
+
 <PropListing
     name=description
     options="string"

sites/example-project/src/pages/input-components/date-picker/+page.md

@@ -0,0 +1,26 @@
+---
+queries:
+---
+
+```sql seven_days_sales 
+select 
+  strftime(invoice_date, '%Y-%m-%d') as invoice_date
+  , sum(total_sales) as sales_usd0
+from orders
+group by invoice_date
+order by invoice_date desc limit 7
+```
+
+
+# Date Picker without Default set
+
+<DateInput data={seven_days_sales} dates=invoice_date name=single_date/>
+
+
+
+# Date Picker with Default set to End
+
+<DateInput data={seven_days_sales} dates=invoice_date name=single_date_with_default inputDefault=end/>
+
+
+