WindowsのカレンダーライクなDatePicker(bootstrap-datepicker)
本記事では、WindowsのカレンダーライクなDatePickerである
bootstrap-datepickerを紹介していきます。
本記事の内容です。
bootstrap-datepickerとは?
Bootstrapを利用したdatepickerです。Windowsのカレンダーライクなdatepickerを使用することができます。
デモページ
下記ページで実際に動作させることができます。Datepicker for Bootstrap
ライセンス
Apache License 2.0です。github.com
使用するための準備
jQueryに依存しているので、jQueryが必要です。下記のページからダウンロードしてください。
jquery.com
bootstrap-datepickerは、デモページ左上のDownloadボタンから
ダウンロードできます。
サンプルコード
HTML<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/bootstrap-datepicker.css" /> <link rel="stylesheet" href="css/bootstrap-datepicker.standalone.css" /> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap-datepicker.min.js"></script> <!-- 言語ファイルは、必要に応じて増やす --> <script src="locales/bootstrap-datepicker.ja.min.js"></script> <script src="js/index.js"></script> </head> <body> <input type="text" id="datepicker"> </body> </html>
$(function() { $('#datepicker').datepicker({ // 任意のオプション // デモページ右下のコードをそのまま貼り付ける }); });
使い方
デモページで設定した、ページ右下に表示されるソースコードをそのままコピーして使用してください。