日付ピッカーライブラリ比較

'use client';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { useState } from 'react';
import { isAfter } from 'date-fns';

export function ReactDatePickerDemo() {
  // 基準時刻を1つに統一（別々に取得するとSSRとクライアントで日数計算が揺れる）
  const [initial] = useState(() => {
    const start = new Date();
    return { start, end: new Date(start.getTime() + 7 * 24 * 60 * 60 * 1000) };
  });
  const [startDate, setStartDate] = useState<Date | null>(initial.start);
  const [endDate, setEndDate] = useState<Date | null>(initial.end);

  return (
    <div className="flex flex-col sm:flex-row gap-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">開始日</label>
        <DatePicker
          selected={startDate}
          onChange={(date: Date | null) => {
            setStartDate(date);
            if (endDate && date && isAfter(date, endDate)) setEndDate(null);
          }}
          selectsStart
          startDate={startDate}
          endDate={endDate}
          dateFormat="yyyy/MM/dd"
          className="border border-gray-300 rounded px-3 py-2 text-sm"
        />
      </div>
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">終了日</label>
        <DatePicker
          selected={endDate}
          onChange={(date: Date | null) => setEndDate(date)}
          selectsEnd
          startDate={startDate}
          endDate={endDate}
          minDate={startDate ?? undefined}
          dateFormat="yyyy/MM/dd"
          className="border border-gray-300 rounded px-3 py-2 text-sm"
        />
      </div>
    </div>
  );
}

'use client';
import { DayPicker, type DateRange } from '@daypicker/react';
import '@daypicker/react/style.css';
import { useState } from 'react';
import { ja } from '@daypicker/react/locale';

export function ReactDayPickerDemo() {
  // 基準時刻を1つに統一（別々に取得するとSSRとクライアントで日数計算が揺れる）
  const [range, setRange] = useState<DateRange | undefined>(() => {
    const from = new Date();
    return { from, to: new Date(from.getTime() + 7 * 24 * 60 * 60 * 1000) };
  });

  return (
    <div>
      <DayPicker
        mode="range"
        selected={range}
        onSelect={setRange}
        locale={ja}
        numberOfMonths={2}
      />
      {range?.from && range?.to && (
        <p className="text-sm text-gray-600 mt-2">
          選択期間: {range.from.toLocaleDateString('ja-JP')} 〜 {range.to.toLocaleDateString('ja-JP')}
        </p>
      )}
    </div>
  );
}

'use client';
import { useState } from 'react';
import { DatePickerInput, DatePicker } from '@mantine/dates';
import { MantineProvider } from '@mantine/core';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
import dayjs from 'dayjs';

export function MantineDatePickerDemo() {
  const [range, setRange] = useState<[Date | null, Date | null]>([null, null]);

  const presets = [
    { label: '今週', value: [dayjs().startOf('week').toDate(), dayjs().endOf('week').toDate()] as [Date, Date] },
    { label: '今月', value: [dayjs().startOf('month').toDate(), dayjs().endOf('month').toDate()] as [Date, Date] },
    { label: '先月', value: [dayjs().subtract(1, 'month').startOf('month').toDate(), dayjs().subtract(1, 'month').endOf('month').toDate()] as [Date, Date] },
  ];

  return (
    <MantineProvider>
      <div className="flex flex-col gap-4">
        <DatePickerInput
          type="range"
          label="日付範囲を選択"
          placeholder="開始日 → 終了日"
          value={range}
          onChange={setRange}
          locale="ja"
          valueFormat="YYYY/MM/DD"
          clearable
        />
        <div className="flex gap-2">
          {presets.map(preset => (
            <button
              key={preset.label}
              onClick={() => setRange(preset.value)}
              className="px-3 py-1 text-sm border rounded hover:bg-gray-50"
            >
              {preset.label}
            </button>
          ))}
        </div>
        <DatePicker
          type="range"
          value={range}
          onChange={setRange}
          locale="ja"
          numberOfColumns={2}
        />
      </div>
    </MantineProvider>
  );
}

'use client';
import { useState } from 'react';
import { format, addMonths, subMonths, isSameDay, isAfter, isBefore } from 'date-fns';
import { ja } from 'date-fns/locale';

export function CustomDateRangePickerDemo() {
  const [start, setStart] = useState<Date | null>(null);
  const [end, setEnd] = useState<Date | null>(null);
  const [hovered, setHovered] = useState<Date | null>(null);
  const [viewMonth, setViewMonth] = useState(new Date());

  const handleDayClick = (day: Date) => {
    if (!start || (start && end)) {
      setStart(day);
      setEnd(null);
    } else {
      if (isAfter(day, start)) setEnd(day);
      else { setEnd(start); setStart(day); }
    }
  };

  const isInRange = (day: Date) => {
    const rangeEnd = end ?? hovered;
    if (!start || !rangeEnd) return false;
    return isAfter(day, start) && isBefore(day, rangeEnd);
  };

  const daysInMonth = (year: number, month: number) =>
    new Date(year, month + 1, 0).getDate();

  const year = viewMonth.getFullYear();
  const month = viewMonth.getMonth();
  const firstDay = new Date(year, month, 1).getDay();
  const days = daysInMonth(year, month);

  return (
    <div className="inline-block">
      <div className="flex items-center justify-between mb-3">
        <button onClick={() => setViewMonth(subMonths(viewMonth, 1))} className="px-2 py-1 text-sm">←</button>
        <span className="font-semibold text-sm">{format(viewMonth, 'yyyy年M月', { locale: ja })}</span>
        <button onClick={() => setViewMonth(addMonths(viewMonth, 1))} className="px-2 py-1 text-sm">→</button>
      </div>
      <div className="grid grid-cols-7 gap-1 text-center text-xs text-gray-500 mb-1">
        {['日','月','火','水','木','金','土'].map(d => <span key={d}>{d}</span>)}
      </div>
      <div className="grid grid-cols-7 gap-1">
        {Array.from({ length: firstDay }).map((_, i) => <span key={`e${i}`} />)}
        {Array.from({ length: days }, (_, i) => {
          const day = new Date(year, month, i + 1);
          const isStart = start && isSameDay(day, start);
          const isEnd = end && isSameDay(day, end);
          const inRange = isInRange(day);
          return (
            <button
              key={i}
              onClick={() => handleDayClick(day)}
              onMouseEnter={() => setHovered(day)}
              onMouseLeave={() => setHovered(null)}
              className={`text-sm py-1 rounded ${
                isStart || isEnd ? 'bg-blue-600 text-white' : inRange ? 'bg-blue-100' : 'hover:bg-gray-100'
              }`}
            >
              {i + 1}
            </button>
          );
        })}
      </div>
      {start && (
        <p className="text-xs text-gray-500 mt-2">
          {format(start, 'yyyy/MM/dd')} {end ? `〜 ${format(end, 'yyyy/MM/dd')}` : '（終了日を選択）'}
        </p>
      )}
    </div>
  );
}

'use client';
import { useState } from 'react';
import { ConfigProvider, DatePicker } from 'antd';
import jaJP from 'antd/locale/ja_JP';
import dayjs, { Dayjs } from 'dayjs';
import 'dayjs/locale/ja';

const { RangePicker } = DatePicker;

export function AntdDatePickerDemo() {
  const [single, setSingle] = useState<Dayjs | null>(dayjs());
  const [range, setRange] = useState<[Dayjs | null, Dayjs | null] | null>([
    dayjs(),
    dayjs().add(7, 'day'),
  ]);

  const presets = [
    { label: '今週', value: [dayjs().startOf('week'), dayjs().endOf('week')] as [Dayjs, Dayjs] },
    { label: '今月', value: [dayjs().startOf('month'), dayjs().endOf('month')] as [Dayjs, Dayjs] },
    { label: '先月', value: [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')] as [Dayjs, Dayjs] },
  ];

  return (
    <ConfigProvider locale={jaJP}>
      <div className="flex flex-col gap-4">
        {/* 単一選択 */}
        <DatePicker
          value={single}
          onChange={(date) => setSingle(date)}
          format="YYYY/MM/DD"
          placeholder="日付を選択"
        />
        {/* 範囲選択（プリセット付き） */}
        <RangePicker
          value={range}
          onChange={(dates) => setRange(dates)}
          presets={presets}
          format="YYYY/MM/DD"
          placeholder={['開始日', '終了日']}
        />
        {range?.[0] && range?.[1] && (
          <p className="text-sm text-gray-600">
            選択期間: {range[0].format('YYYY/MM/DD')} 〜 {range[1].format('YYYY/MM/DD')}
            （{range[1].diff(range[0], 'day')}日間）
          </p>
        )}
      </div>
    </ConfigProvider>
  );
}

'use client';
// npx shadcn@latest add calendar popover
// ※ calendar.tsx の import は react-day-picker → @daypicker/react に書き換え（同一API）
import { useState } from 'react';
import { type DateRange } from '@daypicker/react';
import { ja } from '@daypicker/react/locale';
import { format } from 'date-fns';
import { CalendarIcon } from 'lucide-react';
import { Calendar } from '@/components/ui/calendar';
import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';

export function ShadcnDatePickerDemo() {
  const [date, setDate] = useState<Date | undefined>();
  const [range, setRange] = useState<DateRange | undefined>({
    from: new Date(),
    to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
  });
  const [open, setOpen] = useState(false);

  return (
    <div className="flex flex-col gap-6">
      {/* 入力欄クリックで開くポップオーバー型（単一選択） */}
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger className="inline-flex w-56 items-center gap-2 rounded-lg border px-3 py-2 text-sm">
          <CalendarIcon className="size-4" />
          {date ? format(date, 'yyyy年M月d日', { locale: ja }) : '日付を選択'}
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <Calendar
            mode="single"
            selected={date}
            onSelect={(d) => { setDate(d); setOpen(false); }}
            locale={ja}
          />
        </PopoverContent>
      </Popover>

      {/* インライン範囲選択（2ヶ月表示） */}
      <Calendar
        mode="range"
        selected={range}
        onSelect={setRange}
        numberOfMonths={2}
        locale={ja}
      />
    </div>
  );
}

'use client';
import { useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import dayjs, { Dayjs } from 'dayjs';
import 'dayjs/locale/ja';

export function MuiDatePickerDemo() {
  const [value, setValue] = useState<Dayjs | null>(dayjs());

  return (
    // アダプタ方式: AdapterDayjs / AdapterDateFns / AdapterLuxon から選択
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="ja">
      <DatePicker
        label="日付を選択"
        value={value}
        onChange={(date) => setValue(date)}
        format="YYYY/MM/DD"
        slotProps={{ textField: { size: 'small' } }}
      />
      {/* 範囲選択（DateRangePicker）は @mui/x-date-pickers-pro（有償）限定 */}
    </LocalizationProvider>
  );
}

'use client';
import { useState } from 'react';

// ゼロ依存: ブラウザ標準の input[type="date"] のみで実装
export function NativeDateInputDemo() {
  const [single, setSingle] = useState('');
  const [start, setStart] = useState('');
  const [end, setEnd] = useState('');

  return (
    <div className="flex flex-col gap-4">
      {/* 単一選択 */}
      <input
        type="date"
        value={single}
        onChange={(e) => setSingle(e.target.value)}
        className="border rounded px-3 py-2 text-sm"
      />

      {/* 範囲選択: 2つのinputをmin/maxで連動させる */}
      <div className="flex items-center gap-3">
        <input
          type="date"
          value={start}
          max={end || undefined}
          onChange={(e) => setStart(e.target.value)}
          className="border rounded px-3 py-2 text-sm"
        />
        <span>→</span>
        <input
          type="date"
          value={end}
          min={start || undefined}
          onChange={(e) => setEnd(e.target.value)}
          className="border rounded px-3 py-2 text-sm"
        />
      </div>
      {/* 値は yyyy-mm-dd 形式に正規化される。表示UIはブラウザ/OS依存 */}
    </div>
  );
}