jQuery UI datepicker not working?

Question

I have the jQuery ui datepicker showing up in my web app, but when I go to choose a date, it doesn't do anything. And the default Html5 datepicker is still showing up.

My datepicker image

How can I disable the Html5 one for the jQuery Ui datepicker to work?

This is how I did my code:

Create.cshtml

 @Html.LabelFor(model => model.EnrollmentDate, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.EnrollmentDate, new { htmlAttributes = new { @class = "form-control", @id = "datepicker" } })
                    @Html.ValidationMessageFor(model => model.EnrollmentDate, "", new { @class = "text-danger" })

........

@section Scripts {
<script>
    $(document).ready(function(){
        $('#datepicker').datepicker({
        dateFormat: 'dd-mm-yy'
       });
    });
</script>        
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 1

You can go for inbuilt date pickers. Please refer https://jqueryui.com/datepicker/

Answer 2

I just had to make the type for the @Html.EditFor a text type and it worked. Trying to use @Html.TextBoxFor did not work for me.

@Html.EditorFor(model => model.EnrollmentDate, new { htmlAttributes = new { @class = "form-control", @type = "text" } })

<script>
    $(function(){
        $('#EnrollmentDate').datepicker({
            changeMonth: true,
            changeYear: true
        });
    });
</script>

Answer 3

The reason I stumbled across this question is because I was using the jQuery UI for the datepickers. For some reason, it wasn't working properly on Chromium-based browsers.

To make them work, I had to change the type to 'text' only if the browser was Chromium-based.

To do so, I just wrote the following:

function fixDatepickers(){
    if (window.chrome !== undefined) {
        $('#ID_of_datepicker')[0].type = 'text';
    }
}

and then called it in the HTML page where the datepickers are not working like this:

<script src="file_with_new_func.js"></script>
<script type="text/javascript">$(document).ready(fixDatepickers());</script>

Works like charm!