tabler/shared/ui/Datepicker.astro

---
import Icon from './Icon.astro';
import CaptureScript from '../components/CaptureScript.astro';

interface Props {
	id?: string;
	value?: string;
	class?: string;
	/** 'icon' | 'icon-prepend' | undefined (plain) */
	layout?: string;
	inline?: boolean;
}

const {
	id,
	value = '2020-06-20',
	class: className,
	layout,
	inline,
} = Astro.props;

const placeholder = 'Select a date';

const chevronLeft =
	'<!-- Download SVG icon from http://tabler.io/icons/icon/chevron-left -->\n\t<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon"><path d="M15 6l-6 6l6 6" /></svg>';
const chevronRight =
	'<!-- Download SVG icon from http://tabler.io/icons/icon/chevron-right -->\n\t<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon"><path d="M9 6l6 6l-6 6" /></svg>';

const datepickerId = id ? `datepicker-${id}` : undefined;
---

{
	id &&
		(inline ? (
			<div class="datepicker-inline" id={`datepicker-${id}`} />
		) : layout === 'icon' ? (
			<div class:list={['input-icon', className]}>
				<input
					class="form-control"
					placeholder={placeholder}
					id={`datepicker-${id}`}
					value={value}
				/>
				<span class="input-icon-addon"><Icon name="calendar" /></span>
			</div>
		) : layout === 'icon-prepend' ? (
			<div class:list={['input-icon', className]}>
				<span class="input-icon-addon"><Icon name="calendar" /></span>
				<input
					class="form-control"
					placeholder={placeholder}
					id={`datepicker-${id}`}
					value={value}
				/>
			</div>
		) : (
			<input
				class:list={['form-control', className]}
				placeholder={placeholder}
				id={`datepicker-${id}`}
				value={value}
			/>
		))
}
{
	id && (
		<CaptureScript>
			<!-- BEGIN DATEPICKER -->
			<script is:inline define:vars={{ datepickerId, chevronLeft, chevronRight, inline }}>
				function initDatepicker() {
					window.tabler_datepicker ??= {};

					if (!window.Litepicker) return;

					const picker = new Litepicker({
						element: document.getElementById(datepickerId),
						buttonText: {
							previousMonth: chevronLeft,
							nextMonth: chevronRight,
						},
						...(inline ? { inlineMode: true } : {}),
					});

					// Litepicker sets buttonText as the buttons' innerHTML, and the icon SVGs are
					// aria-hidden, so the generated month-nav buttons otherwise have no accessible
					// name. Litepicker also re-renders these buttons (new DOM nodes) on every open
					// and every month change, so re-apply the labels on each "render" event instead
					// of labeling once at init.
					picker.on('render', () => {
						picker.ui?.querySelector('.button-previous-month')?.setAttribute('aria-label', 'Previous month');
						picker.ui?.querySelector('.button-next-month')?.setAttribute('aria-label', 'Next month');
					});

					window.tabler_datepicker[datepickerId] = picker;
				}

				document.readyState !== 'loading' ? initDatepicker() : document.addEventListener('DOMContentLoaded', initDatepicker, { once: true });
			</script>
			<!-- END DATEPICKER -->
		</CaptureScript>
	)
}