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>
asp.net-mvc
twitter-bootstrap
razor
Ben Junior
quelle
quelle
Antworten:
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
datepicker
Klasse zum Textfeld hinzufügen , zusätzlich zuform-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>
quelle
[DataType(DataType.Date)]
in einem Feld definiert ist, automatisch diedatepicker
CSS-Klasse hinzugefügt und das js ausgeführt wird?Diese Antwort wendet das
type=date
Attribut einfach auf das HTML-input
Element 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.
quelle
[DataType(DataType.DateTime)] public DateTime BirthDate { get; set; }
hat bei mir nicht funktioniert.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
quelle
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:
quelle
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" })
quelle
[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>
quelle
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 () {...});
quelle
Die Datumsauswahl von Checkout Shield UI für MVC . Eine leistungsstarke Komponente, die Sie mit wenigen Zeilen integrieren können:
@(Html.ShieldDatePicker() .Name("datepicker"))
quelle
Einfach:
[DataType(DataType.Date)] Public DateTime Ldate {get;set;}
quelle