Wie füge ich Date Picker Bootstrap 3 in MVC 5-Projekten mit der Razor-Engine hinzu?

Ich benötige einige Richtlinien zum Installieren eines Date Picker Bootstrap 3 in einem MVC 5-Projekt mithilfe der Razor-Engine. Ich habe diesen Link hier gefunden , konnte ihn aber in VS2013 nicht zum Laufen bringen.

Beim Kopieren aus dem Beispiel im späteren Link oben habe ich bereits Folgendes getan:

            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"));

Dann habe ich das Skript wie folgt zur Indexansicht hinzugefügt

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

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

Wie kann man hier die Datumsauswahl anrufen?

   <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>

Diese Antwort verwendet den jQuery UI Datepicker , ein separates Include. Es gibt andere Möglichkeiten, dies zu tun, ohne die jQuery-Benutzeroberfläche einzuschließen.

Zunächst müssen Sie lediglich die datepickerKlasse zum Textfeld hinzufügen , zusätzlich zu form-control:

<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>

Um sicherzustellen, dass das Javascript nach dem Rendern des Textfelds ausgelöst wird, müssen Sie den Datepicker-Aufruf in die jQuery-Ready-Funktion einfügen:

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

Diese Antwort wendet das type=dateAttribut einfach auf das HTML- inputElement an und verlässt sich auf den Browser, um eine Datumsauswahl bereitzustellen. Beachten Sie, dass auch 2017 nicht alle Browser eine eigene Datumsauswahl bieten. Daher möchten Sie möglicherweise einen Rückfall durchführen.

Sie müssen der Eigenschaft im Ansichtsmodell lediglich Attribute hinzufügen. Beispiel für Variable Ldate:

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

Angenommen, Sie verwenden MVC 5 und Visual Studio 2013.

Ich hoffe, dies kann jemandem helfen, der mit meinem gleichen Problem konfrontiert war.

Diese Antwort verwendet das Bootstrap DatePicker Plugin , das nicht für Bootstrap typisch ist.

Stellen Sie sicher, dass Sie Bootstrap DatePicker über NuGet installieren

Erstellen Sie ein kleines Stück JavaScript und nennen Sie es DatePickerReady.js. Speichern Sie es im Skriptverzeichnis. Dies stellt sicher, dass es auch in Nicht-HTML5-Browsern funktioniert, obwohl dies heutzutage nur noch wenige sind.

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

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

    });
}

Stellen Sie die Bündel ein

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"))

Stellen Sie nun den Datentyp so ein, dass MVC bei Verwendung von EditorFor erkennt, was verwendet werden soll.

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

Ihr Ansichtscode sollte sein

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

und voila

Fügen Sie nur diese beiden Zeilen vor der datetime-Eigenschaft in Ihrem Modell hinzu

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

und Ergebnis wird sein:

Versuch, ein präzises Update basierend auf der Antwort von Enzero bereitzustellen .

• Installieren Sie das Bootstrap.Datepicker- Paket.

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

• Fügen Sie in AppStart / BundleConfig.cs die zugehörigen Skripts und Stile zu den Bundles hinzu.

  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"));
  

• Aktivieren und passen Sie in der zugehörigen Ansicht im Abschnitt "Skripte" die Datumsauswahl an.

  @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>
  

• Fügen Sie schließlich die Datepicker- Klasse in das zugehörige Steuerelement ein. In einer TextBox und für ein Datumsformat wie "31/12/2018" wäre dies beispielsweise:

  @Html.TextBox("YOUR-STRING-FOR-THE-DATE", "{0:dd/MM/yyyy}", new { @class = "datepicker" })
  

[DataType(DataType.Date)]
public DateTime BirthDate { get; set; }

Dekorieren Sie Ihr Modell so. Ich kann eine Bootstrap-Datums- / Uhrzeitauswahl verwenden, die ich verwendet habe. https://github.com/Eonasdan/bootstrap-datetimepicker/

Ich nehme an, Sie haben bereits Bundles für Bootstrap CSS und JS

Ihre Datumsauswahl-Bundle-Einträge

 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"));

Rendern Sie Bundles in Ihrer Layoutansicht

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

Ihr HTML im Blick

<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>

Fügen Sie dies am Ende Ihrer Ansicht hinzu.

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

1.Der Sie jquery.js zunächst ref
2.check Layout, stellen Sie sicher , rufen Sie "~ / Bündel / Bootstrap"
3.Check Layout finden Sie im Abschnitt Scripts Position machen, muss es sein , nach "~ / Bündel / Bootstrap"
4 .add Klasse "datepicker" zum Textfeld
5.put $ ('. datepicker'). datepicker (); in $ (function () {...});

Die Datumsauswahl von Checkout Shield UI für MVC . Eine leistungsstarke Komponente, die Sie mit wenigen Zeilen integrieren können:

@(Html.ShieldDatePicker()
    .Name("datepicker"))

Einfach:

[DataType(DataType.Date)]
Public DateTime Ldate {get;set;}