Put a datepicker in a mvc 5 view with jquery or similar

Question

I have this Razor in my view:

<div class="form-group">
            @*@Html.LabelFor(model => model.DT_AGENDAMENTO, htmlAttributes: new { @class = "control-label col-md-2" })*@
            @Html.Label("Data de Agendamento", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10" id="datepicker">
                @Html.EditorFor(model => model.DT_AGENDAMENTO, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DT_AGENDAMENTO, "", new { @class = "text-danger" })
            </div>
        </div>

And at the bottom of the page I have these scripts:

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

    $(".datepicker").datepicker();
}

I don’t know how I assign an ID to the field: @Html.EditorFor(model => model.DT_AGENDAMENTO, new { htmlAttributes = new { @class = "form-control" } }), I put the ID on <div>, but when Address does not work and also does not give js error.

I tried to install this package but gives error:

PM> Install-Package Datepickerhtmlhelper

EDIT1

In Dev Tools, I got this bug. I said there were no mistakes, but I got this:

GET http://localhost:55839/Bundles/jqueryui 404 (Not Found)

EDIT2

I created a class called datepicker like this:

@Html.EditorFor(model => model.DT_AGENDAMENTO, new { htmlAttributes = new { @class = "form-control datepicker"

And I wrote this script

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

    <script type="text/javascript">
        $(document).ready(function(){
            $(".datepicker").datepicker();
        });
    </script>
}

Anyway it doesn’t work. Not funnel nor by a decree.

Answer 1

You’re confusing things. This package you reported is creating a htmlHelper. You should use it like this:

@Html.DatePickerFor(model => model.Date, "autoclose=true", "todayBtn=true", "todayHighlight=true")

As shown in the package page.

The script you are wanting to run is from another plugin.

I didn’t use the one you demonstrated. I like it very much from here, when I work with bootstrap.

To use it with Asp.net-mvc you download the project, the file .js you you can download the same here and put in your project. Done this, just reference the script in the view and ready.

    <div class="form-group">
            @*@Html.LabelFor(model => model.DT_AGENDAMENTO, htmlAttributes: new { @class = "control-label col-md-2" })*@
            @Html.Label("Data de Agendamento", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DT_AGENDAMENTO, new { htmlAttributes = new { @class = "form-control", id="dp" } })
                @Html.ValidationMessageFor(model => model.DT_AGENDAMENTO, "", new { @class = "text-danger" })
            </div>
        </div>

@section Scripts{
<script src="~/Scripts/bootstrap-datepicker.js"></script>
    <script>
        $(function () {
            $('#dp').datepicker();
        });
    </script>
}

After that, you add Bundeconfig, or make such amendments as it deems necessary.

The complete files you find on github of the project.

Remembering that this way that I put will work only if you have 1 element with the id "dp" (id="#dp"). To use more than one, change to classes (class=".dp") and change the reference in the script to $(".dp").datepicker();.

Also remembering that the shape I put is just to "work". To maintain the layout and other features, download the full plugin (js + css).

Answer 2

Buddy, datepicker does not work, it does not open, it opens but does not play the value in input?

Make sure you are using Bundleconfig with Minified files ".min.js", because then it does not import.

In the console, some error?

you put the datepicker class in your input?

@Html.EditorFor(model => model.DT_AGENDAMENTO, new { htmlAttributes = new { @class = "form-control datepicker " } })