ASP.NET MVC5でDatepicker for Bootstrapを使う

日付を選択させる際、今までjQueryUIのDatepickerを使っていましたが何気にNuGetで検索してるとDatepicker for Bootstrapというのを見つけたので使ってみました。

1.パッケージをインストール

GitHub*1からダウンロードして手動で組み込んでもいいのですが、せっかくなのでNuGet使いましょう。

パッケージマネージャのコンソールで以下のコマンドを叩きます。

> Install-Package Bootstrap.Datepicker

NuGetを使うと依存関係とか解決してくれるので楽ちんですね。

2.jsを読み込むよう設定

本体のbootstrap-datepicker.jsを読み込むようにします。

BundleConfig.csを以下の様に変更します*2

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
          "~/Scripts/bootstrap.js",
          "~/Scripts/bootstrap-datepicker.js",
          "~/Scripts/respond.js"));

3.クラスを設定

日付選択させたい入力項目に適当なクラスもしくはIDを設定します。

今回はdatepickerというクラス名にしました。

<div class="form-group">
    @Html.LabelFor(model => model.Date, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "datepicker" } })
        @Html.ValidationMessageFor(model => model.Date)
    </div>
</div>

4.初期化のJavaScriptを記述

DatePickerを使えるように以下の様な記述を追加します。

@section Scripts {
    <script type="text/javascript">
        $(function () {
            $('.datepicker').datepicker();
        })
    </script>
}

以上でDatePickerが使えるようになります。

おまけ

日付の形式を変える

$('.datepicker').datepicker({
    format: 'yyyy/mm/dd'
});

曜日を日本語表記にする

NuGetでインストールするとScripts/lopcalesに各言語別のjsが格納されますので、日本語用のjs*3が読み込まれるようにBundleConfig.csを以下の様に変更します。

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
          "~/Scripts/bootstrap.js",
          "~/Scripts/bootstrap-datepicker.js",
          "~/Scripts/locales/bootstrap-datepicker.ja.js",
          "~/Scripts/respond.js"));

後は初期化の際に言語を指定するだけです。

$('.datepicker').datepicker({
    language: 'ja'
});

日付選択後に自動で閉じる

$('.datepicker').datepicker({
    autoclose: 'true'
});

*1:eternicode/bootstrap-datepicker

*2:別のScriptBundleをAddしてもいいけど、そこは好みで

*3:bootstrap-datepicker.ja.js