Calendar 📆 & dayjs

Mui Date Pickerは良いdateライブラリです.日付選択、時刻選択、日付範囲選択など、さまざまな機能が用意されています.

しかし、CSSのカスタマイズは多くの困難に直面している.

import { makeStyles } from "@material-ui/core/styles";

export const styles = makeStyles(() => ({
  root: {
    border: "1px solid grey"
  }
}));

makeSteles()を使用してカスタマイズしましたが、Dateの日付テキスト部分のみカスタマイズ可能で、下記で日付を変更するのに時間がかかり、二度と希望がないので諦めました.

(データセレクタのルート要素へのアクセスは可能ですが、サブ要素へのアクセスは失敗しています...)

Muiはlabタグで、まだ開発中のようです.

📆 react date picker

https://reactdatepicker.com/

次の代替案として見つかったライブラリは、「反応日セレクタ」ライブラリです.Muiの例よりも多く、公式文書にもCustomの方法があるので、Muiよりも分かりやすい.

yarn add react-datepicker

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

日付セレクタ、日付範囲セレクタ、時間セレクタなど様々な機能があります.

しかしreact-datepickerもカスタマイズしにくい.

プロジェクトでnext.jsを使用してcssをインポートしてからブロックされました.

next.jsからcssをインポートするには、グローバルcssとして指定する必要があります.この部分はnextですjsに詳しいメンバーの助けで

ライブラリをカスタマイズすると、cssが望ましくない部分:not演算子に適用される場合が多い.

🕒 dayjs

  const start = dayjs(startDate);
  const end = dayjs(endDate);
  const startFormat = start.format("YYYY-MM-DD");
  const endFormat = end.format("YYYY-MM-DD");
  const diff = Math.floor(end.diff(start, "day", true)); // 날짜 차이

dayjsは、日付と時刻を出力するライブラリです.

カレンダーで受け取った日付をdayjs()に入れて、自分で



データを返します.

このデータはformatで目的のdate formatに設定できます.

上記の例は「YYYY-MM-DD」としてフォーマットされています.

結果は2022-03-15であった.

💡 感じた

• ライブラリは必ずしも良い
ではありません.
• はライブラリではなく直接実施する必要があります
  
  -チームメンバーはカレンダーを直接実現したいが、直接実現すればカスタマイズが容易に見える.(『del>時間があまりない』)
• CSSも勉強内容がたくさんあります.
• 世界には様々なライブラリが存在しています.
さまざまなライブラリを体験してみましょう