Datepicker for BootstrapをCDNを指定して設定

HTML5ではinput type=date がサポートされていますが、ブラウザによって対応がことなっていたり、スマホからは使いにくいです。Twitter社が開発したCSSフレームワークのBootstrapを利用しているときには、「Datepicker for Bootstrap」を使うのが便利です。

利用バージョン

現在、Bootstrapの最新版が4ですが、安定性を重視して3にしました。

Bootstrap3.3.7はjQuery ver3もサポートしますが、Datepickerが動かないかったのでjQuery 2.2.4にしました。

CDNサービスからライブラリを読み込む

CDNを利用すれば自分のサーバーにライブラリを置かなくてもいいメリットがあります(CDNがトラブった時はデメリットですが)。

また、インターネットに接続できる環境でローカルのHTMLを開いても動作するメリットがあります(逆に、インターネットに接続できない環境では、ローカルにサーバー環境を構築してても動作しないデメリットがあります・・・)。

最初にBootstrapのみのテンプレート

BootstrapのBasicTemplateを参考に書き換えました。古いブラウザは無視!

作成したファイルはコチラ https://memordm.com/tes/boot1.html

Datepicker for Bootstrapを追加

参考 http://eternicode.github.io/bootstrap-datepicker/

作成したファイルはコチラ https://memordm.com/tes/boot2.html

年月のみの指定も可能です。

作成したファイルはコチラ https://memordm.com/tes/boot3.html

ライブラリを利用することでシンプルなコードで作れます。

スポンサーリンク
memordmレクタングル(大)
memordmレクタングル(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
memordmレクタングル(大)