Date Picker

1"use client"23import { createSignal } from '@barefootjs/dom'4import { DatePicker } from '@/components/ui/date-picker'56function DatePickerDemo() {7  const [date, setDate] = createSignal<Date | undefined>()89  return (10    <div className="flex flex-col gap-4">11      <DatePicker selected={date()} onSelect={setDate} />12      <p className="text-sm text-muted-foreground">13        {date()14          ? date()!.toLocaleDateString('en-US', {15              weekday: 'long', year: 'numeric',16              month: 'long', day: 'numeric',17            })18          : 'No date selected'}19      </p>20    </div>21  )22}

1"use client"23import { createSignal, createMemo } from '@barefootjs/dom'4import { DatePicker } from '@/components/ui/date-picker'56function DatePickerForm() {7  const [startDate, setStartDate] = createSignal<Date | undefined>()8  const [endDate, setEndDate] = createSignal<Date | undefined>()910  const dayCount = createMemo(() => {11    const start = startDate()12    const end = endDate()13    if (!start || !end) return null14    const diff = Math.abs(end.getTime() - start.getTime())15    return Math.ceil(diff / (1000 * 60 * 60 * 24))16  })1718  return (19    <div className="flex flex-col gap-4">20      <div className="grid grid-cols-2 gap-4">21        <div className="space-y-2">22          <label className="text-sm font-medium">Start Date</label>23          <DatePicker24            selected={startDate()}25            onSelect={setStartDate}26            placeholder="Select start date"27          />28        </div>29        <div className="space-y-2">30          <label className="text-sm font-medium">End Date</label>31          <DatePicker32            selected={endDate()}33            onSelect={setEndDate}34            placeholder="Select end date"35            disabledDates={(d) => {36              const start = startDate()37              return start ? d.getTime() < start.getTime() : false38            }}39          />40        </div>41      </div>42      {dayCount() !== null && (43        <p className="text-sm text-muted-foreground">44          {dayCount()} days selected45        </p>46      )}47    </div>48  )49}

1"use client"23import { createSignal } from '@barefootjs/dom'4import { DateRangePicker, type DateRange } from '@/components/ui/date-picker'56function DateRangeDemo() {7  const [range, setRange] = createSignal<DateRange | undefined>()89  return (10    <DateRangePicker11      selected={range()}12      onSelect={setRange}13      numberOfMonths={2}14    />15  )16}

1"use client"23import { createSignal } from '@barefootjs/dom'4import { DatePicker } from '@/components/ui/date-picker'56function DatePickerWithPresets() {7  const [date, setDate] = createSignal<Date | undefined>()89  const addDays = (days: number): Date => {10    const result = new Date()11    result.setDate(result.getDate() + days)12    return result13  }1415  const presets = [16    { label: 'Today', value: new Date() },17    { label: 'Tomorrow', value: addDays(1) },18    { label: 'In a week', value: addDays(7) },19  ]2021  return (22    <div className="flex flex-col gap-4">23      <div className="flex flex-wrap gap-2">24        {presets.map(preset => (25          <button26            className="rounded-md border px-3 py-1.5 text-sm hover:bg-accent"27            onClick={() => setDate(preset.value)}28          >29            {preset.label}30          </button>31        ))}32      </div>33      <DatePicker34        selected={date()}35        onSelect={setDate}36        formatDate={(d) => d.toLocaleDateString('en-US', {37          month: 'short', day: 'numeric', year: 'numeric',38        })}39      />40    </div>41  )42}