48日目

カレンダーを書くのでreact-datepickerライブラリを使いました.
でも説明とサンプルソースは親切ではありません😥
demoバージョンをそのまま使うとエラーがひどくなります

react-datepicker : www.npmjs.com/package/react-datepicker

react-datepicker demo : reactdatepicker.com/#example-custom-header

lodash : www.npmjs.com/package/lodash

1.ライブラリのインストール

yarn add react-datepicker

2.デフォルトdatepicker構成部品を作成して適用します。jsのインポート

// Calendar.js
import React, { useState } from "react";
import DatePicker from "react-datepicker";

const Calendar = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
  );
};

export default Calendar

import "react-datepicker/dist/react-datepicker.css"; // css import 
import Calendar from './Calendar'  

function App() {
  return (
    <div className="App">
      <Calendar />
    </div>
  );
}

export default App;

react-datepicker 기본

動作がすばらしい
しかし、基本的な方法ではなく、必要に応じてCustomを使いたいと思います.
1.韓国語を使う(Janary->1月)
2.年と月をselectに変更
このため、datepickerはヘッダをprops値に渡し、カスタムオプションを提供します.
Header Customソースの直接インポート

この部分を持ってきて、直接貼って、

エラーは次のとおりです.😣

「range」is notdefined:range関数は存在しません(エラーを表すのは当然です)

「getYear」が定義されていません:ライブラリの追加

「getMonth」が定義されていません:ライブラリの追加

この問題を解決するには、別のディスク・ライブラリをインストールします.

3.追加コピーの追加

range関数を直接実現しようとしたが、正常に動作しなかった.
だからロダッシュの助けを得た😥

yarn add date-fns --save // getYear, getMonth 
yarn add react-lodash // range 사용

4.ソースの変更

import React, { useState } from "react";
import { getYear, getMonth } from "date-fns"; // getYear, getMonth 
import DatePicker, { registerLocale } from "react-datepicker";  // 한국어적용
import ko from 'date-fns/locale/ko'; // 한국어적용
registerLocale("ko", ko) // 한국어적용
const _ = require('lodash');

4-1. range()エラー処理

:range(開始年、最終年).

const years = _.range(1990, getYear(new Date()) + 1, 1); // 수정 

4-2. データ言語の適用

{...}
const months = ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']; 

<DatePicker
	{ ... }
	locale={ko}  // 추가
/>
{...}

4-3. データフォーマット(0000/00/00->0000-00-00)

<DatePicker
	{ ... }
	dateFormat="yyyy-MM-dd"  // 추가
/>

私の望み通り、すべて順調です.😏
プレゼンテーションサイトには複数の例が含まれているため、よりカスタマイズが必要です.
少し修正して使えばいいです

*最終ソース

import React, { useState } from "react";
import { getYear, getMonth } from "date-fns"; // getYear, getMonth 
import DatePicker, { registerLocale } from "react-datepicker";  // 한국어적용
import ko from 'date-fns/locale/ko'; // 한국어적용
registerLocale("ko", ko) // 한국어적용
const _ = require('lodash');


const Calendar = () => {
    const [startDate, setStartDate] = useState(new Date());
    const years = _.range(1990, getYear(new Date()) + 1, 1); // 수정
    const months = ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']; 

  return (
    <DatePicker
      renderCustomHeader={({
        date,
        changeYear,
        changeMonth,
        decreaseMonth,
        increaseMonth,
        prevMonthButtonDisabled,
        nextMonthButtonDisabled
      }) => (
        <div
          style={{
            margin: 10,
            display: "flex",
            justifyContent: "center"
          }}
        >
          <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
            {"<"}
          </button>
          <select
            value={getYear(date)}
            onChange={({ target: { value } }) => changeYear(value)}
          >
            {years.map(option => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>

          <select
            value={months[getMonth(date)]}
            onChange={({ target: { value } }) =>
              changeMonth(months.indexOf(value))
            }
          >
            {months.map(option => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>

          <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
            {">"}
          </button>
        </div>
      )}
      selected={startDate}
      dateFormat={"yyyy-MM-dd"}
      locale={ko}
      onChange={date => setStartDate(date)}
    />
  );
};

export default Calendar

では今日も楽しくコーディングします.🥰