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

80

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>
Ben Junior
quelle
Bitte zeigen Sie uns Ihren cshtml / Razor-Code, mit dem Sie arbeiten, der nicht funktioniert. Vielen Dank
Eric Bishard
Danke für die Antwort. Ich habe meinen Beitrag entsprechend aktualisiert
Ben Junior
Ich werde VS starten und sehen, ob ich es herausfinden kann!
Eric Bishard
Haben Sie die Dateien mit NuGet hinzugefügt oder manuell hinzugefügt?
Mehdiway
Waqar Ahmed ist bei weitem die einfachste Lösung.
Dieglock

Antworten:

79

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>
Karhgath
quelle
4
Ja, genau so habe ich meinen Code gerade und er funktioniert nicht
Eric Bishard
1
Deshalb benutze ich Foundation! Ich habe das gleiche, was Sie tun, ich habe versucht, '@class = "Form-Control Datepicker"' & '@class = "Datepicker Form-Control"' und keine Würfel
Eric Bishard
3
Wenn Sie es zufällig in einer Teilansicht aufrufen, muss sich das Skript auf der Indexseite befinden, sonst funktioniert es nicht, wenn es sich um die Teilansicht handelt. Dies war auch eines der
Ben Junior
Kann ich Razor so automatisieren, dass, wenn es [DataType(DataType.Date)]in einem Feld definiert ist, automatisch die datepickerCSS-Klasse hinzugefügt und das js ausgeführt wird?
Shimmy Weitzhandler
1
Die MVC 5-Vorlagen, die ich in Visual Studio 2015 habe, enthalten keine JQuery-Benutzeroberfläche, daher bin ich mir ziemlich sicher, dass Sie diese zuerst installieren und referenzieren müssen, bevor dies funktioniert. Es gibt hier eine anständige Diskussion mit Links zu verwandten Tutorials: forums.asp.net/t/…
Paul Angelno
60

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.

Keagz93
quelle
3
Dies ist die beste Antwort! Gibt es eine Möglichkeit, Uhrzeit und Datum auszuwählen? [DataType(DataType.DateTime)] public DateTime BirthDate { get; set; }hat bei mir nicht funktioniert.
Yoda
1
Die einfachste Lösung ist hier
Hoang Trinh
26
Das ist NICHT die richtige Antwort! Mit dieser Lösung können nur browserspezifische Kalender für Datumsfelder im Browser angezeigt werden. Das hat nichts mit dem Bootstrap Datetime Plugin zu tun.
ilter
3
Dies funktioniert nicht mit IE 11 und FF 38. Nur Chrome übernimmt dies.
Immirza
1
Das andere Problem bei dieser Lösung ist, dass beim Bearbeiten des Datumsfelds nur "MM / TT / JJJJ" anstelle des bereits vorhandenen Datumswerts angezeigt wird.
Paul Angelno
19

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

Geben Sie hier die Bildbeschreibung ein

Enzero
quelle
1
PS - Legen Sie die Bundles in der Datei BundleConfig.cs im Ordner App_Start fest.
Amit
Wo aktualisieren Sie den Teil mit der Aufschrift <Erforderlich> <Datentyp (DataType.Date)> Öffentliche Eigenschaft DOB As DateTime? = Nichts
Alan
Dies scheint VB.NET zu sein, für diejenigen, die sich die Haare ausreißen. Versucht, es in c # zu konvertieren, aber egal was ich versucht habe, es hat nichts getan.
SteveCav
Dies scheint eine gute Idee zu sein, aber zu viele Details, um Ihre Lösung zu replizieren. Zum Beispiel habe ich weder einen Skriptordner noch einen Bundles-Ordner, von dem Ihr Code anscheinend erwartet, dass er mit bestimmten Skripten gefüllt ist?
Alan Baljeu
18

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:Datumsauswahl in der MVC-Anwendung

waqar ahmed
quelle
Aber werden Sie in der Ansicht verwenden? Ich habe TextBoxFor ausprobiert, aber es ist immer noch ein Textfeld
Harambe Attack Helicopter
Diese Methode funktioniert nur in einigen Browsern wie Chrome.
Kazem
IE wird Ihre Lösung scheitern!
Immirza
7

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" })
    
Stefaleon
quelle
Hallo, wie macht man das zu einem Datumsbereich, dh der Benutzer muss zwei Daten von & bis
Transformator
Ich würde dies gerne anwenden, aber ich habe BundleConfig.cs nicht. Razor Pages .net Core 2 MVVM-Architektur.
Alan Baljeu
4
[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>
dnxit
quelle
1
Bitte beachten Sie, dass der Eingabetyp "Datum" (von Datatype.Date festgelegt) derzeit nur von Chrome, Safari und Opera unterstützt wird (wie Sie hier sehen können: w3schools.com/html/html_form_input_types.asp ).
Leiseliesel
1
@leiseliesel Ich habe die Antwort mit einem Bootstrap-Datum / Uhrzeit-Picker aktualisiert.
dnxit
3

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 () {...});

chenZ
quelle
-1

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

@(Html.ShieldDatePicker()
    .Name("datepicker"))
Vladimir Georgiev
quelle
-2

Einfach:

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