特定の日付の無効化

今日、明日、明後日は選択できません。

特定の日付のみ有効化

今日から7日間だけ選択できます。

カスタム関数で日付をフィルタリング

土曜日と日曜日は選択できません。

デフォルト値の設定

カスタム入力フィールドの使用

} // カスタムコンポーネントを渡す
placeholderText=”日付を選択…” // customInput を使う場合もプレースホルダーはここで指定
// dateFormat=”yyyy/MM/dd” // 表示形式は DatePicker 側で指定
/>

  <h2>カスタム入力 + 時間選択</h2>
  <DatePicker
    selected={selectedDate}
    onChange={handleDateChange}
    customInput={<CustomInput />}
    placeholderText="日時を選択..."
    showTimeSelect
    dateFormat="yyyy/MM/dd HH:mm"
    timeFormat="HH:mm"
    timeIntervals={15}
  />
</div>

);
}

export default CustomInputComponent;
“`

customInputを使用する場合、placeholderText, disabled, readOnlyなどのプロパティはDatePickerに渡す必要があります。これらの値はDatePickerが管理し、customInputコンポーネントにpropとして自動的に渡されます。

forwardRefを使用しているのは、DatePickerがカスタム入力要素に内部的にrefを設定する必要があるためです。カスタム入力コンポーネントでref propを受け取り、実際のDOM要素（この例ではbutton）に渡してください。

カスタム入力コンポーネントには、value propとして選択された日付の文字列（dateFormat propで指定された形式）が渡されます。このvalueをテキスト表示に利用できます。

また、DatePickerの他の便利な入力フィールド関連propとして、placeholderText, disabled, readOnly があります。

• placeholderText: 入力フィールドに表示されるプレースホルダーテキスト。
• disabled: 入力フィールドとカレンダーを無効化します。
• readOnly: 入力フィールドからの直接入力を禁止し、カレンダーからの選択のみを許可します。

カレンダー表示のカスタマイズ

カレンダー自体の表示方法も様々なpropで制御できます。

• inline: trueにすると、DatePickerが常に表示され、入力フィールドをクリックして開く必要がなくなります。
  jsx
<DatePicker
selected={selectedDate}
onChange={handleDateChange}
inline // 常にカレンダーを表示
/>

• withPortal: trueにすると、カレンダーがReact Portalを使用してDOMの別の場所にレンダリングされます。これは、モーダルやオーバーレイ内でDatePickerを使用する場合に、z-indexの問題などを回避するのに役立ちます。
  jsx
<DatePicker
selected={selectedDate}
onChange={handleDateChange}
withPortal // ポータルを使ってレンダリング
/>

• monthsShown: 表示する月数を指定します。複数の月を一度に表示できます。
  jsx
<DatePicker
selected={selectedDate}
onChange={handleDateChange}
monthsShown={2} // 2ヶ月表示
/>

• showPreviousMonths: monthsShownと組み合わせて使用し、過去の月を先に表示するか（デフォルト）未来の月を先に表示するかを制御します。

• 年・月ドロップダウン:

  • showMonthDropdown: 月の選択肢をドロップダウンで表示します。
  • showYearDropdown: 年の選択肢をドロップダウンで表示します。
  • dropdownMode="select": ドロップダウンを<select>要素としてレンダリングします。（デフォルトは"scroll"）
  • scrollableYearDropdown: 年ドロップダウンをスクロール可能にし、表示される年数を制限せずに多くの年を表示できるようにします。
  • yearDropdownItemNumber: dropdownMode="scroll" の場合に表示する年の数を指定します。

  jsx
<DatePicker
selected={selectedDate}
onChange={handleDateChange}
showMonthDropdown // 月をドロップダウンで選択
showYearDropdown // 年をドロップダウンで選択
dropdownMode="select" // ドロップダウンを select タグで表示
// scrollableYearDropdown // スクロール可能な年ドロップダウン (dropdownMode="scroll" 時)
// yearDropdownItemNumber={10} // スクロール可能な年ドロップダウンに表示する年数 (dropdownMode="scroll" 時)
/>

• カスタムヘッダー (renderCustomHeader): カレンダーのヘッダー部分（月と年の表示、前後の月への移動ボタンなど）を完全にカスタムレンダリングできます。このpropに関数を渡すと、その関数がヘッダーをレンダリングします。関数は現在の表示月やナビゲーション関数などを含むオブジェクトを受け取ります。

  “`jsx
  import React, { useState } from ‘react’;
  import DatePicker from ‘react-datepicker’;
  import “react-datepicker/dist/react-datepicker.css”;
  import { getMonth, getYear } from ‘date-fns’;
  import range from “lodash/range”; // 配列生成に lodash.range を使う例

  const years = range(1990, getYear(new Date()) + 1, 1); // 1990年から今年までの年リスト
  const months = [
  “1月”, “2月”, “3月”, “4月”, “5月”, “6月”,
  “7月”, “8月”, “9月”, “10月”, “11月”, “12月”
  ];

  function CustomHeaderComponent() {
  const [selectedDate, setSelectedDate] = useState(null);

  const handleDateChange = (date) => {
  setSelectedDate(date);
  };

  return (

  カスタムヘッダー

  (

  
  {/ 前月ボタン /}
  
  {“<“}
  

          {/* 月ドロップダウン */}
          <select
            value={getMonth(date)} // 現在表示されている月のインデックス (0-11)
            onChange={({ target: { value } }) => changeMonth(parseInt(value, 10))}
            style={{ marginLeft: '10px', marginRight: '5px' }}
          >
            {months.map((option, index) => (
              <option key={option} value={index}>
                {option}
              </option>
            ))}
          </select>
  
          {/* 年ドロップダウン */}
          <select
            value={getYear(date)} // 現在表示されている年
            onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}
             style={{ marginRight: '10px' }}
          >
            {years.map((option) => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>
  
          {/* 次月ボタン */}
          <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
            {">"}
          </button>
        </div>
      )}
    />
  </div>
  

  );
  }

  export default CustomHeaderComponent;
  ``renderCustomHeader`は非常に強力で、ドロップダウンだけでなく、独自のボタンや表示を追加するなど、ヘッダー部分を完全に制御できます。渡される引数オブジェクトのプロパティを確認して、必要な機能を利用してください。

日付表示形式のカスタマイズ (dateFormat)

DatePickerの入力フィールドやカレンダーヘッダーに表示される日付の形式は、dateFormat propで指定します。このpropには、日付ライブラリ（通常はdate-fns）が解釈できる形式文字列を渡します。

date-fnsの主なフォーマット文字列例:

• yyyy: 4桁の年 (例: 2023)
• yy: 2桁の年 (例: 23)
• MM: 2桁の月 (例: 07)
• M: 1桁または2桁の月 (例: 7)
• dd: 2桁の日 (例: 01)
• d: 1桁または2桁の日 (例: 1)
• EEEE: 曜日のフルネーム (例: Wednesday)
• E..E: 曜日の省略名 (例: Wed)
• HH: 24時間表示の時間 (例: 13)
• hh: 12時間表示の時間 (例: 01)
• mm: 分 (例: 05)
• ss: 秒 (例: 09)
• aa: 午前/午後 (例: PM)

dateFormatのデフォルト値はMM/dd/yyyyですが、日本のアプリケーションではyyyy/MM/ddやyyyy年MM月dd日などが一般的です。

“`jsx
import React, { useState } from ‘react’;
import DatePicker from ‘react-datepicker’;
import “react-datepicker/dist/react-datepicker.css”;

function DateFormatComponent() {
const [selectedDate, setSelectedDate] = useState(new Date());

const handleDateChange = (date) => {
setSelectedDate(date);
};

return (

);
}

export default DateFormatComponent;
“`

dateFormatは表示形式を指定するだけでなく、ユーザーが入力フィールドに直接日付を入力した場合の解析形式としても使用されます。複数の形式で入力を受け付けたい場合は、strictParsing={false}とdateFormat={['format1', 'format2']}のように配列で指定することも可能です。ただし、複数の形式を受け付ける場合は、解析が意図通りに行われるか注意が必要です。

カレンダーナビゲーション

カレンダーの月を移動する方法もいくつか制御できます。

• forceShowMonthNavigation: trueにすると、minDate/maxDateで制限されていても、ナビゲーションボタン（前月・次月）が常に表示されます。ただし、制限範囲外の月への移動はできません。
• showDisabledMonthNavigation: trueにすると、minDate/maxDateで無効化された月へのナビゲーションボタンがグレー表示されるのではなく、有効な月へのボタンと同様に表示されますが、クリックしても無効になります。

これらのプロパティは、minDate/maxDateを使った制限を設定した場合に、ユーザーインターフェースの挙動を調整するために使用されます。

ハイライト (Highlighting Dates)

特定の日付に背景色などをつけてハイライト表示したい場合があります。例えば、イベントのある日や特別な日などです。highlightDates propに、ハイライトしたい日付のリストを渡します。

highlightDatesはDateオブジェクトの配列を受け取ります。より高度なハイライト（例えば、日付ごとに異なる色を付ける）には、オブジェクトの配列を渡すことができます。

“`jsx
import React, { useState } from ‘react’;
import DatePicker from ‘react-datepicker’;
import “react-datepicker/dist/react-datepicker.css”;
import { addDays, getDay } from ‘date-fns’;

function HighlightDatesComponent() {
const [selectedDate, setSelectedDate] = useState(null);
const today = new Date();

// ハイライトする日付のリスト (単なるDateオブジェクトの配列)
const simpleHighlightDates = [
addDays(today, 3),
addDays(today, 5),
addDays(today, 10),
];

// 曜日ごとに異なる色でハイライトする例
// オブジェクトの配列を渡す
// 各オブジェクトは { “react-datepicker__day–highlighted-[modifier]”: datesArray } の形式
const complexHighlightDates = [
{
“react-datepicker__day–highlighted-monday”: [ // 月曜日をハイライト (カスタムクラス名)
addDays(today, 1), addDays(today, 8), addDays(today, 15)
],
“react-datepicker__day–highlighted-friday”: [ // 金曜日をハイライト (カスタムクラス名)
addDays(today, 4), addDays(today, 11), addDays(today, 18)
],
},
];

// カスタムCSSで .react-datepicker__day–highlighted-monday や
// .react-datepicker__day–highlighted-friday のスタイルを定義する必要がある

const handleDateChange = (date) => {
setSelectedDate(date);
};

return (

);
}

export default HighlightDatesComponent;
“`

オブジェクトの配列を使ってハイライトする場合、指定したキー（例: "react-datepicker__day--highlighted-monday"）がそのままCSSクラス名として該当する日付セルに適用されます。このクラス名に対するスタイルをCSSで定義する必要があります。

“`css
/ src/App.css またはあなたのCSSファイル /
/ highlightDates を使って追加されたカスタムクラスのスタイル例 /
.react-datepicker__day–highlighted-monday {
background-color: #d8f0d8; / 薄い緑 /
color: #2e8b57; / 暗い緑 /
}

.react-datepicker__day–highlighted-friday {
background-color: #f0d8d8; / 薄い赤 /
color: #b22222; / レンガ色 /
}
“`

追加情報 (Adding Additional Information)

renderDayContents propを使用すると、カレンダーの日付セル内にカスタムコンテンツをレンダリングできます。例えば、日付の下に小さなアイコンやテキストを追加する場合などに役立ちます。

このpropには関数を渡します。関数は、レンダリング対象の日付（Dateオブジェクト）と、カレンダーの月表示が現在の月であるかどうかを示すフラグisCurrentMonthを受け取ります。関数が返すJSX要素が日付の数字の周りに表示されます。

“`jsx
import React, { useState } from ‘react’;
import DatePicker from ‘react-datepicker’;
import “react-datepicker/dist/react-datepicker.css”;
import { getDay } from ‘date-fns’;

function RenderDayContentsComponent() {
const [selectedDate, setSelectedDate] = useState(null);

const handleDateChange = (date) => {
setSelectedDate(date);
};

// 曜日によって異なるマークを表示する例
const renderDayContents = (dayOfMonth, date, isCurrentMonth) => {
const dayOfWeek = getDay(date); // 日曜日: 0, 月曜日: 1, …
let indicator = ”;
if (isCurrentMonth) {
if (dayOfWeek === 0) indicator = ‘☀️’; // 日曜日
if (dayOfWeek === 6) indicator = ‘🎉’; // 土曜日
if (dayOfMonth === 15) indicator = ‘⭐’; // 毎月15日
}

return (
  <div className="custom-day-content">
    {dayOfMonth}
    {indicator && <span className="day-indicator">{indicator}</span>}
  </div>
);

};

// custom-day-content と day-indicator のスタイルをCSSで定義する必要がある
// 例:
/
.custom-day-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%; // セルいっぱいに広げる
}
.day-indicator {
font-size: 0.6em;
margin-top: 2px;
}
/

return (

);
}

export default RenderDayContentsComponent;
“`

この機能を使えば、日付の横や下にイベントの有無を示すマークを表示したり、簡単な予定情報を表示したりといったことが可能です。

CSSによるスタイリング

React Datepickerは、react-datepicker/dist/react-datepicker.cssにデフォルトスタイルを提供しています。このCSSは多くのクラス名を使用しており、これらをターゲットにスタイルを上書きすることでカスタマイズを行います。

主なCSSクラスの例:

• .react-datepicker: Datepickerコンポーネント全体
• .react-datepicker__month-container: 月ビューのコンテナ
• .react-datepicker__header: 月/年セレクタとナビゲーションボタンを含むヘッダー
• .react-datepicker__month: カレンダーの月ビュー
• .react-datepicker__week: 週の行
• .react-datepicker__day: 日付セル
• .react-datepicker__day--selected: 選択されている日付
• .react-datepicker__day--keyboard-selected: キーボードでフォーカスされている日付
• .react-datepicker__day--in-range: 日付範囲選択で範囲内の日付
• .react-datepicker__day--range-start: 日付範囲の開始日
• .react-datepicker__day--range-end: 日付範囲の終了日
• .react-datepicker__day--disabled: 無効化された日付
• .react-datepicker__day--outside-month: 現在表示されている月以外の月の日付
• .react-datepicker__day--highlighted: highlightDatesでハイライトされた日付 (プレフィックス + modifier)
• .react-datepicker__time-container: 時間選択コンテナ
• .react-datepicker__time .react-datepicker__time-box: 時間選択リスト

カスタマイズ方法:

1. グローバルCSSでの上書き:
   import "react-datepicker/dist/react-datepicker.css"; の後に、あなたのカスタムCSSファイルをインポートし、そこで上記のクラス名をターゲットにスタイルを記述します。詳細度を高くする必要がある場合があります。

   “`css
   / src/App.css /
   @import ‘~react-datepicker/dist/react-datepicker.css’; / デフォルトCSSをインポート /

   / カスタムスタイルの上書き /
   .react-datepicker__day–selected,
   .react-datepicker__day–keyboard-selected {
   background-color: #ff6347; / トマト色 /
   color: white;
   }

   .react-datepicker__day:hover {
   background-color: #f0f0f0;
   }
   ``
（ Sass/SCSS を使用している場合、@importのパスはnode_modules` を起点に記述できます。）

2. CSS Modules:
   CSS Modulesを使用する場合、デフォルトCSSをインポートし、それを基にスタイルを定義します。

   “`jsx
   // src/components/MyDatePicker.module.css
   @import ‘~react-datepicker/dist/react-datepicker.css’;

   / 特定のクラスを上書き /
   .myCustomDatePicker .react-datepicker {
   border-color: purple;
   }

   .myCustomDatePicker .react-datepicker__day–selected {
   background-color: rebeccapurple;
   }
   “`

   “`jsx
   // src/components/MyDatePicker.js
   import React, { useState } from ‘react’;
   import DatePicker from ‘react-datepicker’;
   import styles from ‘./MyDatePicker.module.css’; // CSS Modulesをインポート

   function MyDatePicker() {
   const [selectedDate, setSelectedDate] = useState(null);

   return (
       <div className={styles.myCustomDatePicker}> {/* ラッパー要素にモジュールクラスを適用 */}
           <DatePicker
               selected={selectedDate}
               onChange={date => setSelectedDate(date)}
               // DatePicker自体にクラスを適用する prop は limited なので、
               // ラッパー div にクラスを適用し、その中で子孫セレクタを使うのが一般的
           />
       </div>
   );
   

   }
   ``
React Datepickerは、DatePickerコンポーネント自体に直接classNamepropを渡すことができますが、これが内部の子要素に全て継承されるわけではありません。そのため、多くの場合、DatePickerコンポーネントをラッパー要素で囲み、そのラッパー要素にCSS Moduleのクラスを適用し、子孫セレクタ（例:.myCustomDatePicker .react-datepicker__day–selected`）を使ってスタイリングするのが効果的です。

3. Styled Componentsなど:
   Styled ComponentsのようなCSS-in-JSライブラリを使用する場合も、同様にデフォルトCSSをインポートし、スタイルを定義できます。または、カスタム入力コンポーネント（customInput）と組み合わせて、入力部分を完全にStyled Componentsでスタイリングすることも可能です。

   “`jsx
   import styled from ‘styled-components’;
   import DatePicker from ‘react-datepicker’;
   import “react-datepicker/dist/react-datepicker.css”; // デフォルトCSSもインポート

   // Styled DatePicker コンポーネントを作成
   const StyledDatePicker = styled(DatePicker)`
   / ここに DatePicker コンポーネント自体のスタイルを記述 /
   border: 1px solid blue;
   padding: 8px;
   border-radius: 4px;

   / 内部要素のスタイルは子孫セレクタで記述 /
   .react-datepicker {
   font-family: ‘Verdana’, sans-serif;
   }

   .react-datepicker__day–selected {
   background-color: blue;
   color: white;
   }
   `;

   function StyledComponentExample() {
   const [selectedDate, setSelectedDate] = useState(null);

   return (
       <div>
           <h2>Styled Components でスタイリング</h2>
           <StyledDatePicker
               selected={selectedDate}
               onChange={date => setSelectedDate(date)}
           />
       </div>
   );
   

   }
   “`
   Styled Componentsの場合でも、内部のカレンダー要素のスタイルを調整するには、子孫セレクタを使用するのが一般的です。

これらの方法を組み合わせて、アプリケーションのデザインガイドラインに沿ったDatepickerを作成できます。

5. 国際化 (Internationalization – i18n)

日付の表示形式や曜日の名前などは、国や地域によって異なります。React Datepickerは国際化（i18n）に対応しており、様々な言語で表示することができます。

国際化のためには、以下のステップが必要です。

1. 使用したいロケールデータ（言語と地域の定義）をインポートする。
2. DatePickerコンポーネントにlocale propでロケールを指定する。

React Datepickerは内部でdate-fnsを使用しているため、date-fnsが提供するロケールデータをインポートして使用します。

“`jsx
import React, { useState } from ‘react’;
import DatePicker from ‘react-datepicker’;
import “react-datepicker/dist/react-datepicker.css”;

// date-fnsから日本語ロケールをインポート
import { ja } from ‘date-fns/locale’;
// 他のロケールも同様にインポートできます (例: enUS, fr, es など)
// import { enUS } from ‘date-fns/locale’;

function InternationalizedDatePicker() {
const [selectedDate, setSelectedDate] = useState(null);

const handleDateChange = (date) => {
setSelectedDate(date);
};

return (

  <h2>国際化対応 (英語)</h2>
  <DatePicker
    selected={selectedDate}
    onChange={handleDateChange}
    // locale={enUS} // 英語ロケールを指定 (インポートが必要)
    // locale prop を指定しない場合、デフォルトで英語になります
    dateFormat="MMMM d, yyyy EEEE" // 英語に合わせた表示形式
  />
</div>

// 取得した文字列をDateオブジェクトに戻す必要がある場合
// const parsedDate = new Date(dateString); // または date-fns の parse/parseISO など
// console.log('パースされたDateオブジェクト:', parsedDate);

    <br />

    <div>
      <label>イベント開始時間:</label>
      <Controller
        name="eventTime"
        control={control}
         rules={{ required: '時間は必須です' }}
        render={({ field }) => (
          <DatePicker
             selected={field.value}
             onChange={field.onChange}
             onBlur={field.onBlur}
             ref={field.ref}
             showTimeSelect // 時間選択モード
             showTimeSelectOnly // 日付なし時間のみモード
             timeCaption="時間"
             dateFormat="HH:mm" // 時間のみの表示形式
             placeholderText="HH:MM"
          />
        )}
      />
       {errors.eventTime && <p style={{ color: 'red' }}>{errors.eventTime.message}</p>}
    </div>

    <button type="submit" style={{ marginTop: '20px' }}>送信</button>
  </form>
</div>

// 他のバリデーション例: 必須チェック
// if (!date) {
//     setError('日付は必須です');
// } else {
//     setError('');
// }