【90日目】Django_カレンダーが表示できた話_HTML5_プログラミング学び日記
このnoteは、31歳未経験からエンジニアを目指して勉強していく記録を綴っているものです。現在はAdTechでカスタマーサクセスを担当しつつ、色んなチャンスに恵まれ、CS業務や子育てと並行しながらチャレンジしています。
これからプログラミングを始める方にとってのTipsやモチベアップに繋げられるように頑張りたいと思っています。
--------------------------------------------
ようやく、ようやく日付入力用のカレンダーを実装できました…！長かった
Djangoというフレームワーク上でカレンダーを動かそうとすると一筋縄ではいかず、何度もあきらめかけました。
大きく2つのアプローチをとって、そのうち一つで成功した形です。
アプローチ①：
ブートストラップのDatetimePickerを使う
アプローチ②：
HTML5の日付入力フォームを使う
成功したのは後者のHTML5のアプローチです。①は技術力不足で実装できませんでした。
まずは③のうまくいった方法を記載し、そのあとに①がなぜうまくいかなかったのか考察してみたいと思います。
HTML5の日付入力フォームを使う
HTML5では<input>タグに様々な属性を付与することができ、その一つで「type='date'」とすればカレンダー方式の日付入力フォームが生成できます。この機能を活用するわけですが、Djangoで実装する場合には一工夫が必要です。
forms.pyで以下のように書きます。deadlineというのがカレンダー方式で日付入力したいフィールドです。
[forms.py]
from django import forms
class DateInput(forms.DateInput):
input_type = 'date'
class TodoForm(forms.ModelForm):
class Meta:
model = Todo
fields = '__all__'
widgets = {
'deadline': DateInput()
}
↓widgetsの所を以下のように書くと失敗します（私はこう書いていたため苦戦しました）
widgets = {
'deadline': 'date'
}html上で直接<input>タグを書くときはそのままtype='date'と書けますが、Djangoのフォームを使うときは「DateInputクラス」を継承してクラスを作り、その中でdateを指定する必要がありました。
うまくいくときはあっさりしたもので、数日間苦労した割にシンプルな答えでした。
また、DateInputクラスを作らなくともwidgetsで「NumberInput」を使うと全く同じHTML5のカレンダー機能を動作させることができます。
以下のように書きます。
[forms.py]
from django import forms
class TodoForm(forms.ModelForm):
class Meta:
model = Todo
fields = '__all__'
widgets = {
'deadline': forms.NumberInput(attrs={
"type":"date"})
}ここでNumberInputにattrs属性を付与しなければ、ただのimput要素になってしまいます。attrsはattributesの略で「属性」という意味です。
なぜブートストラップのDatetimePickerは実装できなかったのか
結局はまだ解決できておりません。web上のスタイルシートから直接読み込むCDN方式でコードを書いたり、ローカルにファイルを持ってきてパスを設定したり、、この方法で実装するために色々試したのですが、、
原因の仮説としては以下です。
・CDNのリンクが間違っている（少なくとも元々使っていたブートストラップ5とマッチしていない）
・何か手順をスキップしてしまっている
色んなソースのやり方を0から再現してもうまくいかなかったので、後者が濃厚だろうなとは思いつつ、結局は別のやり方(HTML5)を選んでしまいました。
いずれにせよ今回の目的は達せられたので、この辺はおいおいJavaScriptやブートストラップの知識を補完していきながら学んでいきたいと思います。
とりあえずひと段落して良かった…！
参考
これまで修了したコース等
【YouTube_Django関係】
Pythonでウェブサービスを作ろう！ #1
テンプレートをマスターしよう！ #2
静的ファイルを配信しよう ！#3
本番公開しよう！ #4
データベースと接続しよう！ #5
ブログを作って学ぶモデル入門！ #6
これが汎用ビューの力！ #7
Djangoフォームを自由自在に操ろう！ #8
djagoを最大限使って効率よくログインを作ろう！ #9
ログイン完成！サインアップ & メール認証 #10
データベースマイグレーション前編 #15
データベースマイグレーション後編 #16
【Paiza】
JavaScript体験篇 8/15講座
Aランクレベルアップメニュー 24/49問
データセット選択メニュー 4/17問
配列メニュー 61/64問
ループメニュー１ 20/20問
ループメニュー２ 12/20問
条件分岐メニュー 25/25問
二重ループメニュー 19/19問
配列活用メニュー 26/26問
文字列処理メニュー 30/30問
Bランクレベルアップメニュー 62/62問
Cランクレベルアップメニュー 30/30問
ランクB合格
ランクC合格
【書籍／ブログ】
Django入門 | 初心者でも1時間でWebアプリ(Todoアプリ)を作成するコース
基礎からのMySQL 514/514頁
Web技術の基本 189/189頁 ※2周目中
京大のPython教科書 116/201頁
Pythonデータベースプログラミング 194/194頁
Pythonエンジニアファーストブック読了
【Progate】
Python Ⅰ~Ⅴ
Python アプリ版 コースⅠ~Ⅴ
SQL Ⅰ~ Ⅳ
SQL アプリ版 コースⅢ
HTML&CSS 初級編
【その他】
Pythonの環境構築
VSCodeの環境構築
MySQLの環境構築（MAMP）
Git / GitHubの環境構築
HEROKUの環境構築
この記事が気に入ったらサポートをしてみませんか？