ゆるふわエンジニアのブログ

行ったこと、調べたこと等をつらつらと書いていくかもしれません。

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>

JavaScript

$(function() {
    $('#datepicker').datepicker({
        // 任意のオプション
        // デモページ右下のコードをそのまま貼り付ける
    });
});

使い方

デモページで設定した、ページ右下に表示されるソースコード
そのままコピーして使用してください。