Basic date picker

A single labelled DatePicker with a selected value. Shows the Input-styled trigger and localized date display.

Preview

Source

apps/docs/app/recipes/datepicker-basic/recipe.tsx

'use client';

import { useState } from 'react';
import { DatePicker } from '@hey-mike/tungsten';
import { type CalendarDate, parseDate } from '@internationalized/date';

export default function DatePickerBasicRecipe() {
  const [value, setValue] = useState<CalendarDate | null>(parseDate('2026-05-15'));
  return (
    <div className="w-64">
      <DatePicker label="Departure date" value={value} onChange={setValue} placeholder="Pick a day" />
    </div>
  );
}

'use client';

import { useState } from 'react';
import { DatePicker } from '@hey-mike/tungsten';
import { type CalendarDate, parseDate } from '@internationalized/date';

export default function DatePickerBasicRecipe() {
  const [value, setValue] = useState<CalendarDate | null>(parseDate('2026-05-15'));
  return (
    <div className="w-64">
      <DatePicker label="Departure date" value={value} onChange={setValue} placeholder="Pick a day" />
    </div>
  );
}