Fix app dateinput timezone (#2127)

* fix(frontend): Fix JSON pane scroll issues

* fix(frontend): Fix AppDateInput timezone issues

* fix(frontend): Use date-fns

* fix(frontend): add disabled to AppRange props

frontend/src/lib/components/DisplayResult.svelte

@@ -143,11 +143,13 @@
 					</div>
 				{/if}
 			</div>{/if}{#if !forceJson && resultKind == 'table-col'}<div
-				class="grid grid-flow-col-dense border border-gray-200 rounded-md"
+				class="grid grid-flow-col-dense border rounded-md"
 			>
 				{#each Object.keys(result) as col}
 					<div class="flex flex-col max-h-40 min-w-full">
-						<div class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md">
+						<div
+							class="px-12 text-left uppercase border-b bg-surface-secondary overflow-hidden rounded-t-md"
+						>
 							{col}
 						</div>
 						{#if Array.isArray(result[col])}

frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte

@@ -7,6 +7,7 @@
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
+	import { parseISO, format as formatDateFns } from 'date-fns'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -37,25 +38,17 @@
 
 	$: handleDefault(defaultValue)
 
-	function formatDate(dateString: string, format: string = 'DD.MM.YYYY') {
-		const date = new Date(dateString)
-
-		if (format === '') {
-			format = 'DD.MM.YYYY'
+	function formatDate(dateString: string, formatString: string = 'dd.MM.yyyy') {
+		if (formatString === '') {
+			formatString = 'dd.MM.yyyy'
 		}
 
-		const padZero = (num: number) => (num < 10 ? '0' + num : num.toString())
-
-		const formatTokens = {
-			YYYY: date.getFullYear(),
-			MM: padZero(date.getMonth() + 1),
-			DD: padZero(date.getDate()),
-			hh: padZero(date.getHours()),
-			mm: padZero(date.getMinutes()),
-			ss: padZero(date.getSeconds())
+		try {
+			const isoDate = parseISO(dateString)
+			return formatDateFns(isoDate, formatString)
+		} catch (error) {
+			return 'Error formatting date:' + error.message
 		}
-
-		return format.replace(/YYYY|MM|DD|hh|mm|ss/g, (match) => formatTokens[match])
 	}
 
 	$: value && outputs?.result.set(formatDate(value, format))

frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte

@@ -29,6 +29,7 @@
 	let max = 42
 	let step = 1
 	let slider: HTMLElement
+	let disabled = false
 
 	let values: [number, number] = [0, 0]
 
@@ -66,6 +67,7 @@
 <InputValue {id} input={configuration.max} bind:value={max} />
 <InputValue {id} input={configuration.defaultLow} bind:value={values[0]} />
 <InputValue {id} input={configuration.defaultHigh} bind:value={values[1]} />
+<InputValue {id} input={configuration.disabled} bind:value={disabled} />
 
 <InitializeComponent {id} />
 
@@ -88,6 +90,7 @@
 					min={!min ? 0 : +min}
 					max={!max ? 1 : +max}
 					range
+					{disabled}
 				/>
 				<!-- <RangeSlider {step} range min={min ?? 0} max={max ?? 1} bind:values /> -->
 			</div>

frontend/src/lib/components/apps/editor/component/components.ts

@@ -1832,6 +1832,14 @@ This is a paragraph.
 					value: 1,
 					fieldType: 'number',
 					tooltip: 'Spread between each number suggestion'
+				},
+				disabled: {
+					type: 'static',
+					value: false,
+					fieldType: 'boolean',
+					onlyStatic: true,
+					tooltip:
+						'Determine if the slider is disabled, or enabled (only disables interactions, and events)'
 				}
 			}
 		}