date-range.svelte

<script lang="ts">
	import { formatDateShort } from '$lib/util';
	import Icon from '@iconify/svelte';
	import { FilterStore, getEndDefault, getStartDefault } from './store';

	$: start = $FilterStore.start;
	$: end = $FilterStore.end;

	let startInput: HTMLInputElement;
	let endInput: HTMLInputElement;

	$: formattedStart = formatDateShort(start, getStartDefault(null));
	$: formattedEnd = formatDateShort(end, getEndDefault(null));
	$: daysBetween = daysBetweenFn(start, end);

	function daysBetweenFn(_s: string, _e: string) {
		const __s = getStartDefault(_s);
		const __e = getEndDefault(_e);

		const s = new Date(__s + ' 00:00:00').getTime();
		const e = new Date(__e + ' 23:59:59').getTime();

		const between = e - s;
		const days = Math.ceil(between / 1000 / 60 / 60 / 24);

		return days + ' day' + (days > 1 ? 's' : '');
	}

	function openStart() {
		startInput.showPicker();
	}

	function openEnd() {
		endInput.showPicker();
	}
</script>

<div class="relative z-0">
	<div
		class="relative z-10 rounded-3xl flex items-center border border-gray-500 py-2 px-3 gap-2 bg-white text-gray-500 text-sm"
	>
		<div>
			<Icon class="h-4 w-4 inline -mt-1" icon="solar:calendar-outline" />
		</div>
		<div class="font-bold text-black">{daysBetween}</div>
		<div
			class="cursor-pointer"
			on:click={openStart}
			on:keydown={openStart}
			role="button"
			tabindex={0}
		>
			{formattedStart}
		</div>
		<div>-</div>
		<div class="cursor-pointer" on:click={openEnd} on:keydown={openEnd} role="button" tabindex={0}>
			{formattedEnd}
		</div>
	</div>
	<div class="absolute inset-0 z-0 rounded-3xl grid grid-cols-2">
		<input
			max={end}
			type="date"
			bind:value={$FilterStore.start}
			bind:this={startInput}
			class="bg-transparent"
		/>
		<input
			min={start}
			type="date"
			bind:value={$FilterStore.end}
			bind:this={endInput}
			class="bg-transparent"
		/>
	</div>
</div>