DateField

Keyboard Navigation

The DateField component provides comprehensive keyboard navigation for improved accessibility and user experience:

Features

• Visual Indicators: Today's date is highlighted with a dot indicator
• Date Constraints: Set minimum and maximum dates to restrict available selections
• Keyboard Focus: Visual feedback for keyboard-focused days
• Clear Function: Easy way to clear the selected date
• Smart Positioning: Calendar automatically positions itself to stay within viewport
• Responsive Design: Works seamlessly on desktop and mobile devices

Usage Examples

Basic Usage

<script>
	import { DateField } from 'ui-svelte';
	let date = $state(null);
</script>

<DateField name="birthdate" bind:value={date} />

With Date Constraints

<script>
	import { DateField } from 'ui-svelte';

	let date = $state(null);
	const today = new Date();
	const minDate = new Date(today.getFullYear(), today.getMonth(), 1);
	const maxDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
</script>

<DateField
	name="appointment"
	label="Fecha de cita"
	minDate={minDate}
	maxDate={maxDate}
	bind:value={date}
/>

With Callback

<script>
	import { DateField } from 'ui-svelte';

	let date = $state(null);

	const handleDateChange = (newDate) => {
		console.log('Selected date:', newDate);
		// Perform additional actions
	};
</script>

<DateField
	name="date"
	label="Selecciona una fecha"
	onchange={handleDateChange}
	bind:value={date}
/>