I'm developing an application and would like to put the date field when it's clicked it displays a calendar for selection in this style: datapicker , but I do not know how to do it.
I'm developing an application and would like to put the date field when it's clicked it displays a calendar for selection in this style: datapicker , but I do not know how to do it.
I'll put it in steps.
Make sure jQuery UI is installed in your solution. Open the Package Manager Console ( View > Other Windows & kb> Package Manager Console ) and type:
PM> Install-Package jQuery.UI.Combined
Make sure there is a Bundle for it ( App_Start/BundleConfig.cs
):
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
Make sure this Bundle is in View that will have datepicker
or if it is in Views/Shared/_Layout.cshtml
:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
In View , add a script via @section
to initialize datepicker
:
@section scripts {
<script>
$(document).ready(function () {
$(".datepicker").datepicker({
autoclose: true,
format: "dd/mm/yyyy",
language: "pt-BR"
});
});
</script>
}
This causes everything marked with the datepicker
class to receive the visual behavior of a datepicker
.
This part will be rendered in the layout where the following is checked:
@RenderSection("scripts", required: false)
Datepickers
The best component to insert is TextBoxFor
. It is possible to use EditorFor
, but I do not recommend because some strange behaviors may arise:
@Html.TextBoxFor(model => model.Data, new { @class = "form-control datepicker", placeholder = "Minha Data" })
Doing this script, datepicker
should work.
You can use HTML5, it's very simple
<input type="date">
PS: Not compatible with IE