web-dev-qa-db-ja.com

Razorエンジンを使用してMVC 5プロジェクトにDate Picker Bootstrap 3を追加する方法

Razorエンジンを使用してMVC 5プロジェクトに Date Picker Bootstrap 3をインストールする方法に関するガイドラインがいくつか必要です。私はこのリンクを見つけました こちら しかしVS2013では動かせませんでした。

上記の後のリンクの例からコピーすると、私はすでに次のことをしました：

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/bootstrap-datepicker.js",    // ** NEW for Bootstrap Datepicker
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/bootstrap-datepicker.css",  // ** NEW for Bootstrap Datepicker
                  "~/Content/site.css"));

それから私は次のようにインデックスビューにスクリプトを追加しました

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

<script type="text/javascript">
    $('.datepicker').datepicker(); //Initialise any date pickers
</script>
}

さて、ここでデートピッカーを呼び出す方法は？

   <div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>
asp.net-mvctwitter-bootstraprazor
72
Ben Junior

この回答では jQuery UI Datepicker を使用していますが、これは別のインクルードです。 jQuery UIを含めずにこれを実行する方法は他にもあります。

まず、form-controlに加えてdatepickerクラスをテキストボックスに追加するだけです。

<div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>

次に、テキストボックスがレンダリングされた後に確実にJavaScriptが起動されるようにするには、dateQueryの呼び出しをjQueryのready関数に追加する必要があります。

<script type="text/javascript">
    $(function () { // will trigger when the document is ready
       $('.datepicker').datepicker(); //Initialise any date pickers
    });
</script>
75
Karhgath

この答えは単にHTMLのinput要素に type=date属性 を適用し、日付ピッカーを提供するブラウザに依存しています。 2017年でさえ、すべてのブラウザが独自の日付ピッカーを提供しているわけではないので、フォールバックを提供することをお勧めします。

ビューモデルのプロパティに属性を追加するだけです。変数Ldateの例：

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
Public DateTime Ldate {get;set;}

MVC 5とVisual Studio 2013を使用しているとします。

50
Keagz93

私はこれが私の同じ問題に直面していた誰かを助けることができると思います。

この回答では、Bootstrap DatePicker Pluginを使用していますが、これはブートストラップに固有のものではありません。

必ずNuGetを介してBootstrap DatePickerをインストールしてください。

小さなJavaScriptを作成し、DatePickerReady.jsという名前を付けてScripts dirに保存します。これは、HTML 5以外のブラウザでも確実に動作するようにするでしょう。

if (!Modernizr.inputtypes.date) {
    $(function () {

       $(".datecontrol").datepicker();

    });
}

バンドルを設定する

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

bundles.Add(New StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/bootstrap-datepicker3.css",
              "~/Content/site.css"))

EditorForが使用されたときにMVCが使用されるものを識別するようにデータ型を設定します。

<Required>
<DataType(DataType.Date)>
Public Property DOB As DateTime? = Nothing

ビューコードは

@Html.EditorFor(Function(model) model.DOB, New With {.htmlAttributes = New With {.class = "form-control datecontrol", .PlaceHolder = "Enter Date of Birth"}})

そして出来上がり

enter image description here

17
Enzero

モデルのdatetimeプロパティの前にこれら2行だけを追加します

[DataType(DataType.Date)] 
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

結果は次のようになります。Date Picker in MVC Application

13
waqar ahmed

Enzeroの回答に基づいて、簡潔な更新を提供しようとしています。

  • Bootstrap.Datepickerパッケージをインストールしてください。

    PM> install-package Bootstrap.Datepicker
...
Successfully installed 'Bootstrap.Datepicker 1.7.1' to ...

  • AppStart/BundleConfig.csで、関連するスクリプトとスタイルをバンドルに追加します。

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
      //...,
      "~/Scripts/bootstrap-datepicker.js",
      "~/Scripts/locales/bootstrap-datepicker.YOUR-LOCALE-CODE-HERE.min.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
      ...,
      "~/Content/bootstrap-datepicker3.css"));

  • 関連ビューのスクリプトのセクションで、日付ピッカーを有効にしてカスタマイズします。

    @section scripts{
    <script type="text/javascript">
        //...
        $('.datepicker').datepicker({
            format: 'dd/mm/yyyy', //choose the date format you prefer
            language: "YOUR-LOCALE-CODE-HERE",
            orientation: 'left bottom'
        });
    </script>

  • 最終的にdatepickerクラスを関連コントロールに追加します。たとえば、TextBoxの場合、および「31/12/2018」のような日付形式の場合、これは次のようになります。

    @Html.TextBox("YOUR-STRING-FOR-THE-DATE", "{0:dd/MM/yyyy}", new { @class = "datepicker" })
6
stefaleon
[DataType(DataType.Date)]
public DateTime BirthDate { get; set; }

このようにあなたのモデルを飾ります。私はこれを使用したブートストラップの日付時刻ピッカーを使用することができます。 https://github.com/Eonasdan/bootstrap-datetimepicker/

私はあなたがすでにブートストラップcssとjsのためのバンドルを持っていると思います

あなたのデートピッカーバンドルのエントリー

 bundles.Add(new ScriptBundle("~/bundles/datePicker").Include(
           "~/Scripts/moment.min.js",
           "~/Scripts/bootstrap-datetimepicker.min.js"));

        bundles.Add(new StyleBundle("~/Content/datepicker").Include(
                 "~/Content/bootstrap-datetimepicker.min.css"));

レイアウトビューでバンドルをレンダリングする

@Styles.Render("~/Content/datepicker")
@Scripts.Render("~/bundles/datePicker")

表示中のHTML

<div class="form-group">
        @Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "lead col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.BirthDate, new { @class = "datetimepicker form-control" })
            @Html.ValidationMessageFor(model => model.BirthDate, "", new { @class = "text-danger" })
        </div>
</div>

ビューの最後にこれを追加してください。

<script>
    $(document).ready(function () {
        $('.datetimepicker').datetimepicker({
            format: 'lll'
        });
    });
</script>
4
dnxit

1.最初にjquery.jsを参照していることを確認してください
2.レイアウトを確認し、必ず "〜/ bundles/bootstrap"を呼び出します
3.レイアウトをチェックして、セクションをレンダリングするスクリプトを見てください。
4.テキストボックスに "datepicker"クラスを追加します
5.put $（ '。datepicker'）。datepicker（）; $（function（）{...}）;

3
chenZ