Djangoのbootstrap-datepicker-plusにてCSSが崩れてしまう時の対処法

Djangoのカレンダー入力などを簡単に実装してくれることで便利なライブラリとして「bootstrap-datepicker-plus」が有名ですよね。

最初からBoostrap等でWebアプリをデザインしていれば問題ないのでしょうが、ある程度作ってあるWebアプリに「bootstrap-datepicker-plus」を入れようとすると自分でデザインしたCSSと競合して大変なことになってしまいますよね。

「カレンダーのところだけCSSが適用されればいいのに!」「それ以外の余計なCSSなんていらないよ!」思う人も多いかもしれません。
まあわざわざboostrapで入れずにjqueryの “datepicker” を使えばいいのかもしれませんが…。

そこで今回は DatePickerInput 等のFormを使ったときにカレンダーのところだけCSSを適用する方法について解説していきます。

CSSの解析から解説いたしますので、コードさえあればいいよという人はこちらまでスキップしてください。

スポンサーリンク
目次

bootstrap-datepicker-plusでデザインが崩れる原因

まずはDjangoでboostrapのcssを適用するとデザインが崩れてしまう原因についてです。

boostrapのdatepickerをdjangoで使用する際にはCSSを適用させるためにtemplateファイル(htmlファイル)に以下のような記述をすると思います。

{% bootstrap_css %}

これをすることによってboostrapのCSSが適用されるようになるのですが、これがカレンダーの部分だけでなくボディやボタン要素などあらゆる要素に適用されてしまいます。

ソースを見てみると以下のようになっていることがわかります。

こんな感じでタグレベルや要素タイプレベルでCSSつけられたら崩れるのも当然ですね…(ヤメテクレー)

解決策

解決策はいたって簡単です。
要は必要なCSSだけ抜き出せばよいのです。

必要なCSSつってもどれかわかんねーよと思われる方もいるかもしれませんが、ここでブラウザの開発者ツールが生きてきます。

ここではChromeで解説しますが、EdgeやFireFoxでも同じことができますのでそれぞれご利用のブラウザで確認してみてください。(細かい操作方法やクリックするボタンは異なりますので、それぞれご利用のブラウザに置き換えてください。)

1. まずは「{% bootstrap_css %}」にてBoostrapのCSSを適用させた状態で、ご自身で作成したカレンダーの入力フォームがあるページに移動します。そして “F12” キーを押してください。
モードによっては “fnキー(ファンクションキー)” を同時に押す必要があります。

2. F12キーを押すと右側に開発者ツールがにゅっと出てくると思いますので、ポインターのようなマークをクリックします。

3. ポインターのようなマークをクリックすると適用されたスタイルが選択できるようになりますので、カレンダーのマークのところをクリックします。

4. 開発者ツールにスタイルが表示されますので表示されたスタイルを控えます。

これでカレンダーに必要なスタイルが何なのかがわかりましたので、これを自分が用意したCSSに反映させます。

対処法

さて、スタイルを取得できましたのでCSSファイルに反映させます。
なお、今回取得したCSSは以下の通りです。

body 関連のCSSも記載しておりますが、この書き方だとbody全体に影響してしまうので、該当の場所にだけ影響させたい場合は<div>で囲ってクラスをつけるかbodyにクラスを指定するようにしてください。

上記をご自身が作成しているCSSに記載すれば {% bootstrap_css %} の記載がなくてもスタイルが整うはずです。
また、上記は DatePickerInput だろうが TimePickerInputだろうが適用されると思いますので、上記のCSSだけで十分です。

いかがでしょうか。
カレンダーのデザインだけ使いたいという人もいらっしゃると思いますので、参考になれば幸いです。

今回はここまでです。
お疲れ様でした。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

本業ではPHPを使ったWEBアプリやJavaを使用した基幹アプリを作成しております。Pythonは個人的に勉強しており、E資格を取ったりしたおかげで、業務でAIの研究とかも任されるようになりました。学習のアウトプットのために本サイトを運営しておりますが、これからPythonを学ぶという人のお役に立てればいいなと思います。わからないことや調査して記事にしてほしいことがございましたらご連絡いただけると幸いです。

コメント

コメントする

目次
閉じる