Date picker

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

	let due = $state<CalendarDate>();
	const now = today(getLocalTimeZone());
</script>

<DatePicker
	label="Return date"
	bind:value={due}
	min={now}
	max={now.add({ days: 90 })}
	isUnavailable={(d) => getDayOfWeek(d, 'en-US') === 5}
	hint="Loans last up to 90 days. The library is closed on Fridays."
	name="due"
/>

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

	let due = $state<CalendarDate>();
	const now = today(getLocalTimeZone());
</script>

<NaturalDate
	label="Return date"
	bind:value={due}
	min={now}
	max={now.add({ days: 90 })}
	isUnavailable={(d) => getDayOfWeek(d, 'en-US') === 5}
	name="natural-due"
/>

<script lang="ts">
	import type { CalendarDate } from '@internationalized/date';
	import DatePicker from '#lib/ui/DatePicker.svelte';

	let start = $state<CalendarDate>();
</script>

<DatePicker
	label="Start of the copying"
	bind:value={start}
	error={start ? undefined : 'Choose when the copyist should start.'}
/>

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

	let visit = $state<CalendarDate>(today(getLocalTimeZone()).add({ days: 3 }));
	// Fully booked: every seventh day from today.
	const booked = (d: CalendarDate) => d.day % 7 === 0;
</script>

<div class="booking">
	<Calendar label="Reading room visit" bind:value={visit} isUnavailable={booked} />
	<p>Booked for {visit.toString()}.</p>
</div>

<style>
	.booking {
		display: grid;
		gap: 0.75rem;
	}
	.booking p {
		margin: 0;
		color: var(--ui-muted);
		font-size: 0.875rem;
	}
</style>

<script lang="ts">
	import type { CalendarDate } from '@internationalized/date';
	import DatePicker from '#lib/ui/DatePicker.svelte';

	let visit = $state<CalendarDate>();
</script>

<!-- Hijri months and years (Umm al-Qura), Arabic names and digits, right to left. -->
<div dir="rtl" lang="ar">
	<DatePicker
		label="موعد الزيارة"
		placeholder="اختر تاريخًا"
		locale="ar-SA"
		calendar="islamic-umalqura"
		bind:value={visit}
	/>
</div>
<p>Stored as: {visit?.toString() ?? '—'}</p>

<script lang="ts">
	import type { CalendarDate } from '@internationalized/date';
	import DatePicker from '#lib/ui/DatePicker.svelte';
	import { bangla } from '#lib/ui/calendars/bangla.js';

	let visit = $state<CalendarDate>();
</script>

<!-- Bangabda: বৈশাখ, আষাঢ়, শ্রাবণ... with Bangla digits; the value stays a Gregorian date. -->
<div lang="bn">
	<DatePicker
		label="পরিদর্শনের তারিখ"
		placeholder="তারিখ বেছে নিন"
		locale="bn-BD"
		calendar={bangla}
		bind:value={visit}
	/>
</div>
<p>Stored as: {visit?.toString() ?? '—'}</p>