Wakizaka2018/12/262019/5/19皆さんは、WEBアプリ・サービスを作るとき、日付の入力項目にカレンダーを表示する機能を付けたことがありますか?テキストボックスだけだと、「2018/11/30」「20181130」「2018年11月30日」「11月30日」など、人によって入力方法が違うため、カレンダーから日付を選択する機能を用意するケースはよくあります。bootstrap-datepickerを使えば、簡単にカレンダー選択機能を追加することができます。まとめbootstrap-datepickerとは?はじめに、bootstrap-datepickerについて簡単に解説します。bootstrap-datepickerは、お手軽にカレンダー選択機能を画面に導入するためのBootstarpのプラグインです。次のようにテキストボックスにカーソルを置くとカレンダーを表示し、日付を選択すると自動でテキストボックスに日付を入力することができます。次に、bootstrap-datepickerの導入方法について解説します。大きく分けて、以下のような作業があります。Bootstrapを読み込んだHTMLファイルを作成bootstrap-datepickerをダウンロードHTMLファイルにbootstrap-datepickerを読み込むコードを書くそれぞれ詳しく解説しますね。手順1:Bootstrapを読み込んだHTMLファイルを作成まずは、Bootstrapを使うための準備をします。template」のHTMLコードをコピーし、テキストエディタに貼り付けてから「拡張子:.html」でファイルを保存します。ダウンロードサイト:https://getbootstrap.com/docs/4.1/getting-started/introduction/これでBootstrapを使う準備が完了です。手順2:bootstrap-datepickerをダウンロード次に、以下サイトから、最新のbootstrap-datepickerをダウンロードします。ダウンロードサイト:http://eternicode.github.io/bootstrap-datepickerダウンロードできたら、さきほど作成したHTMLと同じディレクトリに配置してください。手順3:HTMLファイルにbootstrap-datepickerを読み込むコードを書く次に、bootstrap-datepickerを読み込むコードを書きます。src="../bootstrap-datepicker-1.6.4-dist/locales/bootstrap-datepicker.ja.min.js"></script>これで、bootstrap-datepickerを使う準備ができました。※ちなみに、「bootstrap-datepicker-1.6.4-dist」はダウンロードしたバージョンによって違うので、注意してください。次に、bootstrap-datepickerの使い方について解説します。使いやすくするためのカスタマイズ方法なども、合わせて解説しますね!カスタマイズなしで使う方法まずは、カスタマイズなしで使う方法[についてです。bootstrap-datepickerは、テキストボックスに設定したidに対して、bootstrap-datepickerを使うための記述をjavascriptで書くことで、使うことができます!たとえばidが「date_sample」の場合は、次のようになります。※以降のHTMLコードすべて表示するのではなく、Body部のみ抜粋して表示します。$('#date_sample').datepicker();</script>カーソルを当てたとき:日付を選択したとき:このように、簡単に日付選択機能を使うことができます。先ほどのサンプルですが、日付を選択したときのフォーマットが「12/01/2018」になっていますよね。「2018/12/01」と表示されたほうがユーザビリティが上がるので、日付フォーマットをYYYY/MM/DD形式に変更する方法について解説します!カスタマイズを加えるときは、javascript内にコードを追加します。formatオプションを使うことで、簡単に日付のフォーマットを変更することができます。});</script>日付を選択したとき:このように、簡単に選択後に表示する日付のフォーマットを変えることができます。次に、日本語に変更する方法について解説します。formatオプションと同じようにlanguageオプションを追加することで、簡単に日本語に設定することができます。日本語に設定する場合は、languageオプションに「ja」を入れます。});</script>カーソルを当てたとき:このように、簡単に日本語化することができます。次に、月から日付選択できるようにする方法についてです。});</script>カーソルを当てたとき:このように、簡単に月から選択を開始することができます。実務レベルでカレンダー選択機能を使いこなすためのテクニックここまでbootstrap-datepickerの使い方について解説しました。このままでも十分使えるのですが、開始日・終了日を入れる、次のようなケースだとどうでしょうか。「開始日が入ったときに、自動で終了日を1週間後に設定したい」という機能を追加するケースもありそうですよね。2019年4月28日まとめ今回は、bootstrap-datepickerの使い方について徹底的に解説しました。WEBアプリ・WEBサービスを作るときは必ずと言っていいほど日付の入力項目は使います。boostrap-datepickerを使えば、お手軽に使いやすい日付選択機能を取り入れることができます。使い方も簡単なので、ぜひ使ってみてくださいね!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。Wakizaka新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。インフラ、製造、テスト、運用保守など、様々な経験あり。侍ブログ編集部として、これまでに200記事以上の記事を執筆。現在はフリーランスエンジニア兼テックライターとして活動中。