datepickerとtimedropperでDateTimeFieldをカスタマイズする

今回のお題

以前にModelFormウィジェットをいくつか取り上げた際に、日時を入力できるSplitDateTimeWidgetを紹介しました。

ただ、これをそのまま使うと日時を直接入力する必要があり使い勝手が悪いです（詳しくは上記の記事を参照）。

そこで今回は以下のようにカレンダーと時計から日時を選択できるようにしていきたいと思います。

カレンダーにはdatepicker, 時計にはtimedropperというjQueryプラグインを使います。

datepickerの導入

プラグインの読み込み部分および実行部分は以下の通りです。

プラグイン読み込み部分

    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

スクリプト実行部分

    <script>
      $(function(){
        $('#id_datetime_0').datepicker({
          dateFormat: "yy-mm-dd"
        });
      });
    </script>

datepickerに関しては公式サイトがあるので、バージョンの問題なども含めて一度そちらをみていただくのが良いかと思います。

一応スクリプト実行部分について解説しておきます。

$('#id_datetime_0')

SplitDateTimeWidgetで生成されたinput要素のうちの日付の入力欄の方を指定しています。

idはdjangoから自動で付与されます。

datepicker({
  dateFormat: "yy-mm-dd"
})

datepickerメソッドで、対象のinput要素（今回であれば#id_datetime_0)にカレンダーを付与します。

引数のdateFormatはカレンダーで選択した日付をどのようなフォーマットでinput要素に入力するかを指定します（今回はyy-mm-ddなので年数は４桁、月と日付は十の位を0詰め）。

djangoのdatetime.dateオブジェクトのデフォルトのフォーマットは(yyyy-mm-dd)なので、datepickerのフォーマットもそれに合わせるかウィジェットの方で引数を追加して対応可能なフォーマットを増やさないとバリデーションエラーになります。

timedropper

timedropperの方のコードは以下の通りになります。

こちらは公式サイトらしきものにあまり情報がなかったので個人ブログなどをいくつか参考にさせていただきました。

バージョンなどは最新ではないかもしれないです。

プラグイン読み込み部分

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/timedropper/1.0/timedropper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/timedropper/1.0/timedropper.min.js"></script>

実行部分

    <script>
      $(function(){
        $("#id_datetime_1").timeDropper({
          format: "H:mm:00"
        })
      })
    </script>

$('#id_datetime_1')

は時刻入力欄に自動付与されるidです。

ここに対してtimeDropperメソッドで時計を付与しています。

format: "H:mm:00"

についてですが、timeDropperは何時何分までしか指定できず、それを無理矢理djangoが解釈可能なH:i:sのフォーマットに変換するためにこのようにしました。

終わりに

以上でdatepickerとtimedroperが実装できました。

カレンダーと時計を表示させるだけであればほとんどコピペでも動くレベルですが、フォーマットに気をつけないとバリデーションで弾かれてしまうのでそこに気をつけたいですね。