Date range picker

<script lang="ts">
	import { endOfMonth, getLocalTimeZone, startOfMonth, today } from '@internationalized/date';
	import type { DateRange } from '#lib/ui/Calendar.svelte';
	import DateRangePicker from '#lib/ui/DateRangePicker.svelte';

	const now = today(getLocalTimeZone());
	const next = startOfMonth(now).add({ months: 1 });
	const presets = [
		{ label: 'Next 7 days', start: now, end: now.add({ days: 6 }) },
		{ label: 'Next 30 days', start: now, end: now.add({ days: 29 }) },
		{ label: 'Rest of this month', start: now, end: endOfMonth(now) },
		{ label: 'Next month', start: next, end: endOfMonth(next) }
	];
	let leave = $state<DateRange>();
	const nights = $derived(leave && leave.end.compare(leave.start));
</script>

<div class="stack">
	<DateRangePicker label="Study leave" bind:value={leave} {presets} min={now} />
	<p>
		{#if leave}{new Intl.PluralRules('en').select(nights!) === 'one'
				? '1 night'
				: `${nights} nights`} away from the House of Wisdom.{:else}No dates chosen yet.{/if}
	</p>
</div>

<style>
	.stack {
		display: grid;
		gap: 0.75rem;
		inline-size: min(100%, 22rem);
	}
	p {
		margin: 0;
		color: var(--ui-muted);
		font-size: 0.875rem;
		font-variant-numeric: tabular-nums;
	}
</style>

<script lang="ts">
	import {
		getDayOfWeek,
		getLocalTimeZone,
		today,
		type CalendarDate
	} from '@internationalized/date';
	import type { DateRange } from '#lib/ui/Calendar.svelte';
	import DateRangePicker from '#lib/ui/DateRangePicker.svelte';

	// Closed on Fridays: a booking can't run across one.
	const closed = (d: CalendarDate) => getDayOfWeek(d, 'en-GB') === 4;
	let booking = $state<DateRange>();
</script>

<div class="stack">
	<DateRangePicker
		label="Reading room booking"
		bind:value={booking}
		isUnavailable={closed}
		min={today(getLocalTimeZone())}
		hint="The reading room is closed on Fridays."
		startName="from"
		endName="to"
	/>
</div>

<style>
	.stack {
		inline-size: min(100%, 22rem);
	}
</style>

<script lang="ts">
	import { getLocalTimeZone, today } from '@internationalized/date';
	import Calendar, { type DateRange } from '#lib/ui/Calendar.svelte';

	const start = today(getLocalTimeZone()).add({ days: 3 });
	let voyage = $state<DateRange>({ start, end: start.add({ days: 12 }) });
	const fmt = new Intl.DateTimeFormat('en', { dateStyle: 'long' });
	const tz = getLocalTimeZone();
</script>

<div class="stack">
	<Calendar label="Voyage from Basra" mode="range" months={2} bind:range={voyage} />
	<p>{fmt.formatRange(voyage.start.toDate(tz), voyage.end.toDate(tz))}</p>
</div>

<style>
	.stack {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}
	p {
		margin: 0;
		color: var(--ui-muted);
		font-size: 0.875rem;
		font-variant-numeric: tabular-nums;
	}
</style>