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

'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() {
  const [startDate, setStartDate] = useState<Date | null>(new Date());
  const [endDate, setEndDate] = useState<Date | null>(
    new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
  );

  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() {
  const [range, setRange] = useState<DateRange | undefined>({
    from: new Date(),
    to: new Date(Date.now() + 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>
  );
}