Datepicker Asp.Net

Question

I am developing an application and would like to put the date field that when it is clicked it displays a calendar for selection in this style: datapicker, but I don’t know how to.

Answer 1

I’ll put in steps.

jQuery UI

Check whether the jQuery UI is installed in your solution. Open Package Manager Console (View > Other Windows > Package Manager Console) and type:

PM> Install-Package jQuery.UI.Combined

Check if there is a Bundle for him (App_Start/BundleConfig.cs):

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

Check this Bundle is in the View that will have the datepicker or so if he is in Views/Shared/_Layout.cshtml:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

Initializing

In the View, add a script via @section to initialize the datepicker:

@section scripts {
    <script>
        $(document).ready(function () {
            $(".datepicker").datepicker({
                autoclose: true,
                format: "dd/mm/yyyy",
                language: "pt-BR"
            });
        });
    </script>
}

This makes everything marked with class datepicker receive the visual behavior of a datepicker.

This part will be rendered in the layout where the following is marked:

@RenderSection("scripts", required: false)

Inserting Datepickers

The best component to insert is the TextBoxFor. It is possible to use EditorFor, but 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, the datepicker should work.

Answer 2

You can use HTML5, it’s quite simple

<input type="date">

PS: not compatible with IE