locked
jQuery DatePicker not working in ASP.NET CORE RRS feed

  • Question

  • User2054207217 posted

    Hello:

    Unable to get datepicker working. Below is my code, can anyone help? Thanks

    @model Project.Models.Advisor
    <link href="~/lib/jqueryui/jquery-ui.css" rel="stylesheet" />
    
    @{
        ViewData["Title"] = "Edit";
    }
    
      <div class="form-group">
                    @Html.LabelFor(model => model.DateChosen, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.DateChosen, new { htmlAttributes = new { @class = "form-control datepicker" } })
                        @Html.ValidationMessageFor(model => model.DateChosen, "", new { @class = "text-danger" })
                    </div>
                </div>
    
    @section Scripts {
    
        <script src="~/lib/jqueryui/jquery-ui.js"></script>
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
    
        <script type="text/javascript">
            $(function () {
    
                $("#datepicker").datepicker();
            });
        </script>
    
    
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    
    }

    Tuesday, February 18, 2020 1:26 AM

Answers

  • User711641945 posted

    Hi progdever,

    Can you please tell me what you mean by DateChosen type being DateTime? To give you more info. this field is coming from a class whose data type is Date.

    That is because you do not share your model in your first post,so I guess if your DateChosen is DateTime you need to add `@type=text`.

    Now you tell us you use the type is `Date`,it also needs to add `@type=text` to make datepicker work.

    Also, in your code, you used @class with datepicker; can I also use datetimepicker?

    I just do not change your code.You could remove it by yourself.

    What do you mean use datetimepicker?

    If you mean use @class with datepicker.Of course you can,change your js like below:

    $(".form-control.datepicker").datepicker();

    If my answer helps you,please mark as answer.Any other questions please post a new thread.Thanks.

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 19, 2020 2:08 AM

All replies

  • User711641945 posted

    Hi progdever,

    Firstly,you do not set id to the input.

    Secondly,if DateChosen's type is DateTime,it would generate the html like below,this would result in you could not choose the date:

    <input type="datetime-local">

    Change like below:

    <div class="form-group">
        @Html.LabelFor(model => model.DateChosen, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DateChosen, new { htmlAttributes = new { @type="text", @id="datepicker", @class = "form-control datepicker" } })
            @Html.ValidationMessageFor(model => model.DateChosen, "", new { @class = "text-danger" })
        </div>
    </div>
    
    @section Scripts {
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#datepicker").datepicker();
            });
        </script>
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    }

    Best Regards,

    Rena

    Tuesday, February 18, 2020 9:18 AM
  • User-474980206 posted

    Also you will need custom CSS to get the jquery-UI datepicker to work with bootstrap. You should pick a bootstrap compatible datepicker.

    Tuesday, February 18, 2020 2:59 PM
  • User2054207217 posted

    Thanks Rena. This helped me and got it working.

    Can you please tell me what you mean by DateChosen type being DateTime? To give you more info. this field is coming from a class whose data type is Date.

    Also, in your code, you used @class with datepicker; can I also use datetimepicker?

    Thanks.

    Paul

    Tuesday, February 18, 2020 6:19 PM
  • User711641945 posted

    Hi progdever,

    Can you please tell me what you mean by DateChosen type being DateTime? To give you more info. this field is coming from a class whose data type is Date.

    That is because you do not share your model in your first post,so I guess if your DateChosen is DateTime you need to add `@type=text`.

    Now you tell us you use the type is `Date`,it also needs to add `@type=text` to make datepicker work.

    Also, in your code, you used @class with datepicker; can I also use datetimepicker?

    I just do not change your code.You could remove it by yourself.

    What do you mean use datetimepicker?

    If you mean use @class with datepicker.Of course you can,change your js like below:

    $(".form-control.datepicker").datepicker();

    If my answer helps you,please mark as answer.Any other questions please post a new thread.Thanks.

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 19, 2020 2:08 AM