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

Question

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

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

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 do not know how I assign an ID to the field: @Html.EditorFor(model => model.DT_AGENDAMENTO, new { htmlAttributes = new { @class = "form-control" } }) , put ID in <div> , but when renderizo does not work and also does not give js error.

I tried to install this package, but it gives an error:

PM > Install-Package DatePickerHTMLHelper

EDIT1

In Dev Tools, I got this error. I said there were no errors, but I got this:

GET link 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 did this script

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

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

It does not work anyway. It does not work by a decree.

jquery c# asp.net-mvc asp.net-mvc-5

asked by anonymous 11.11.2015 / 17:31

2 answers

Break line correctly in a List with Data Binding AngularJS How to validate the value selected in the dropdownlist

score 3 · Answer 1

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

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

As shown in the package page .

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

I did not use the one you showed. I really like from here , when working with bootstrap.

To use it with asp.net -mvc you download the project, the file .js you can download the same here and put in your project. That done, just reference the script in view and that's it.

    <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 this, you add in the BundeConfig , or make the changes that you think necessary.

The complete files you'll find in the gitHub project .

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

Remember also, that the way I put it is just to "work". To keep the layout and other features, download the plugin (js + css).

score 1 · Answer 2

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

Check if you are using the BundleConfig with Minified files ".min.js", because it does not import.

Is there a bug in the console?

Did you put the datepicker class in your input?

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