ConcreteCMS®︎.com Certified Partner

Air Datepickerライブラリを活用し、任意のカレンダーアイコンをinput日付入力欄に設定する

n.yuumi

2024/5/20 21:00

はじめに
Air Datepickerライブラリを適用
カレンダー画像を設定
Air Datepickerのオプション設定を試す
最後に

はじめに

任意のカレンダーアイコンを日付表示用のinputに設定したい、とクライアントからの依頼がありました。最初はCSSのみで対応していたのですが、type="date"のデフォルト表示はブラウザによって差異があるため、少し手こずってしまいました。
そこで、日付表示用のライブラリを使うことにしました。Air Datepickerというライブラリを使えば、カレンダーアイコン画像の設定や言語設定など様々なカスタマイズが簡単に行えます。

Air Datepickerライブラリを適用

npmやyarnでインストール可能です。ドキュメントにもコマンドが記載されています。
インストールできたら、モジュールとCSSをインポートしてください。

//Air Datepickerをインストール
yarn add air-datepicker

//Air Datepickerモジュール & cssをインポート
import AirDatepicker from 'air-datepicker';
import 'air-datepicker/air-datepicker.css';

次に、input要素を指定したAir Datepickerのインスタンスを作成します。

const config = {
// オプションを指定する
};
new AirDatepicker("#input-calendar-date", config);

表示が変わるのが確認できました。
Chrome（Version 124.0.6367.91 ）

Screenshot 2024-04-30 at 9.16.07.png 　　　　　　⇩
Screenshot 2024-04-30 at 9.17.09.png

カレンダー画像を設定

Air Datepickerではデフォルトでカレンダー画像が表示されないため、疑似要素で画像を適用していきます。
その際、疑似要素を適用するためにinputをdivで囲ってください。

<div class="wrapper">
    <input
        id="input-calendar-date"
        type="text"
        class="border border-gray-400 p-2"
        placeholder="カレンダーを表示"
    />
</div>

疑似要素で画像を設置すると、その部分がクリックできなくなります。それを防ぐため、inputエリアの背景色を透明にし、カレンダー画像のz-indexレベルを下げます。

.wrapper {
    position: relative;
}
.wrapper:after {
    content: "";
    width: 2rem;
    height: 2rem;
    display: inline-block;
    background-image: url(/src/files/calendar.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 4%;
    top: 7%;
    z-index: -10;
}
input[type="text"] {
    width: 100%;
    background-color: transparent;
    cursor: pointer;
}

カレンダー画像を設定することができました。カレンダー画像の部分もクリック可能です。
Screenshot 2024-04-30 at 9.34.16.png

Air Datepickerのオプション設定を試す

ドキュメントに様々なオプションが用意されていますが、今回は下記の設定を試してみます。

import localeJa from "air-datepicker/locale/ja";

const config = {
  locale: localeJa, // 日本語に変更
　isMobile: true, // モーダル表示
　
　// 5日、15日、25日に絵文字を表示
　onRenderCell({ date, cellType }: { date: Date; cellType: string }) {
  const dates = [5,15,25],
    emoji = ["👍"],
    isDay = cellType === "day",
    customDate = date.getDate(),
    shouldChangeContent = isDay && dates.includes(customDate),
    randomEmoji = emoji[Math.floor(Math.random() * emoji.length)];

  return {
    html: shouldChangeContent ? randomEmoji : undefined,
    classes: shouldChangeContent ? "-emoji-cell-" : undefined,
    attrs: {
      title: shouldChangeContent ? randomEmoji : "",
    },
  };
},
}

new AirDatepicker("#input-calendar-date", config);