DatePicker

'use client'

import { DatePicker } from '@nerdfish/ui'
import { addYears } from 'date-fns'

export function DatePickerExample() {
	return (
		<DatePicker
			presets={[
				{
					value: '0',
					label: 'Today',
				},
				{
					value: '1',
					label: 'Tomorrow',
				},
				{
					value: '7',
					label: 'Next week',
				},
			]}
			onSelect={(date) => console.info(date)}
			fromYear={addYears(new Date(), -3).getFullYear()}
			toYear={addYears(new Date(), 3).getFullYear()}
		/>
	)
}

'use client'

import { DateRangePicker, type DateRange } from '@nerdfish/ui'
import { addDays, addYears } from 'date-fns'
import * as React from 'react'

export function DateRangePickerExample() {
	const [date, setDate] = React.useState<DateRange | undefined>({
		from: new Date(2022, 0, 20),
		to: addDays(new Date(2022, 0, 20), 20),
	})

	return (
		<DateRangePicker
			className="p-sm"
			selected={date}
			onSelect={setDate}
			fromYear={addYears(new Date(), -3).getFullYear()}
			toYear={addYears(new Date(), 3).getFullYear()}
		/>
	)
}

'use client'

import { DatePicker, Description, Field, Input, Label } from '@nerdfish/ui'
import { addYears, format } from 'date-fns'
import { Calendar } from 'lucide-react'
import * as React from 'react'

export function DatePickerWithInputExample() {
	const [date, setDate] = React.useState<Date | undefined>(new Date())

	return (
		<div className="gap-sm flex w-full">
			<Field>
				<Label>
					Date
					<Description>Your date of birth</Description>
				</Label>

				<DatePicker
					className="p-sm"
					selected={date}
					onSelect={setDate}
					fromYear={addYears(new Date(), -120).getFullYear()}
					toYear={new Date().getFullYear()}
				>
					<Input
						name="date"
						placeholder="Date"
						icon={Calendar}
						value={date ? format(date, 'yyyy-MM-dd') : ''}
						onChange={(e) => setDate(new Date(e.target.value))}
					/>
				</DatePicker>
			</Field>
		</div>
	)
}