Djangoで、日付・時刻の入力を楽にする

Twitterでシェア FaceBookでシェア はてなブックマークでシェア

Python - Django
2018年11月22日21:25に更新(約21日前)
2018年11月18日18:05に作成(約25日前)

概要

Djangoで日付・時間を入力するときは、特に何もしなければ文字列で入力する必要があります。

今回はもう少し直感的に、お洒落に日付・時刻を指定する方法を紹介していきます。

日付の入力(DateField)

プルダウンで選択する(SelectDateWidget)

Djangoには、SelectDateWidgetという日付選択を楽にするウィジェットが提供されています。その名の通り、日付を選択することができます。

必要なのはウィジェットの変更だけです。

from django import forms
from .models import Post


class PostCreateForm(forms.ModelForm):

    class Meta:
        model = Post
        fields = '__all__'
        widgets = {
            'created_at': forms.SelectDateWidget
        }

以下のように表示されます。

年のプルダウンは、デフォルトで今から9年間まであります。それを変更したい...例えば過去の年も含めたいならば、years引数に指定します。

forms.SelectDateWidget(years=[x for x in range(1990, 2030)])

月も同様です。月に関しては、{1: 'Jan', 2: 'Feb...}のように辞書で指定し、各月の表示名を変えることができます。

MONTHS = {
    1: 'jan', 2: 'feb', 3: 'mar', 4: 'apr',
    5: 'may', 6: 'jun', 7: 'jul', 8: 'aug',
    9: 'sep', 10: 'oct', 11: 'nov', 12: 'dec'
}
...
...
forms.SelectDateWidget(months=MONTHS)

カレンダーで選ぶ(jQuery UI Datepicker)

いろーんなものがありますが、一例として今回はjQuery UI Datepickerを紹介します。前回設定した'created_at': forms.SelectDateWidgetは消しておきましょう。

こんな感じになります。

読み込む必要があるのはjQueryと、以下2つです。

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

私はBootstrap4を使っていますが、この場合はBootstrap4でjQueryを読み込んでいます。とはいえ、Bootstrap4は機能が幾つか少ないslim版のjQueryを読み込むので、スリムじゃないやつを読む必要があります。

slimの代わりにこういったのを読み込ませておきましょう。

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

そして、以下のような<script>を書いておきます。jQueryの読み込みの後にでも書いておきましょう。id_created_atは、日付入力欄のidです。id_モデルやフォームのフィールド名という命名規則ですね。

  <script>
      $(function () {
          // 日付は、年-月-日 の形式でお願いする。
          let dateFormat = 'yy-mm-dd';
          $('#id_created_at').datepicker({
              dateFormat: dateFormat
          });
      });
  </script>

色んな機能がありカスタマイズできるので、jQuery UI Datepicker公式のデモを見てみましょう。実際便利です。

表示が英語で困る場合は、以下も読み込ませておきましょう。

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

時刻の入力(TimeField)

カッコイイつまみ(timedropper jQuery time plugin)

この手のもたーくさんありますが、私が個人的に好きなのがtimedropper jQuery time pluginです。

Djangoで、週間・月間カレンダーでもちらっと紹介しました。

こんな感じのつまみが出て、それで時間を調節できます。

jQueryと、以下2つを読み込みましょう。

  <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>を書きます。

  <script>
      $(function () {
          // timedropper
          $("#id_created_at").timeDropper({
              format: "H:mm",
              setCurrentTime: false,
          });
      });
  </script>

たったこれだけです!

日付・時刻の入力

日付・時間両方に対応したカッコいいやつも多くあるのですが、今回はDjangoの機能も紹介したいので別のアプローチも紹介します。

日付と時刻2つに分割する(SplitDateTimeField)

SplitDateTimeFieldという、DatetimeField日付欄時間欄に分けて扱うフィールドがあります。

class PostCreateForm(forms.ModelForm):
    created_at = forms.SplitDateTimeField(label='作成日')

    class Meta:
        model = Post
        fields = '__all__'

できればWidgetの指定だけで済ませたいところですが、今回はウィジェットではなくフィールド毎上書きする必要がありました。

こんな感じで、左側が日付、右側が時間の欄になっています。

created_atというフィールド名ならば、created_at_0として日付欄が、created_at_1として時間欄が作成されます。上で紹介した、DatePickerとTimerDropperを同時に使うとかもできます。

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

          // timedropper
          $("#id_created_at_1").timeDropper({
              format: "H:mm",
              setCurrentTime: false,
          });
      });
  </script>

日付はカレンダーで...

時間はタイムドロッパーですね。

DateTimeFieldを使っていて、何らかの理由で日付欄と時間欄に分けたい場合は有用です。日付・時間をいっぺんに扱えるカッコいいのがないとかですね。

ちなみにですが、widget=forms.SplitHiddenDateTimeWidgetとすると日付と時間欄が見えなくなる...input type="hidden"になります。場合によってはこちらも有用です。

Twitterでシェア FaceBookでシェア はてなブックマークでシェア

記事にコメントする