@labmgm/calendar

Calendar, DatePicker, DateRangePicker, and TimePicker for MGM Laboratory.

Powered by react-day-picker v9 + date-fns.

pnpm add @labmgm/calendar

Storybook (Forms / Date & Time) · Source

Examples

import { useState } from 'react';
import { Calendar, DatePicker, DateRangePicker, TimePicker } from '@labmgm/calendar';

function Demo() {
  const [date, setDate] = useState<Date | undefined>();
  const [range, setRange] = useState<{ from?: Date; to?: Date } | undefined>();
  const [time, setTime] = useState('14:30');

  return (
    <>
      <Calendar mode="single" selected={date} onSelect={setDate} />
      <DatePicker value={date} onChange={setDate} />
      <DateRangePicker value={range} onChange={setRange} />
      <TimePicker value={time} onChange={setTime} />
    </>
  );
}

Components

| Component | Purpose | | ------------------- | --------------------------------------------------------------- | | <Calendar> | The day-picker grid. All react-day-picker props pass through. | | <DatePicker> | Single date selection in a popover. | | <DateRangePicker> | From-to selection across two months. | | <TimePicker> | Native <input type="time"> with MGM styling. |

The modifier classes (today / selected / outside / disabled / range_*) target the inner <button> via [&>button]: so the cell renders correctly — see CLAUDE.md → Calendar gotcha.

See also

• @labmgm/forms — Field wrapper + form integration

License

MIT © MGM Laboratory