JQuery UI datepicker not working in Chrome

Question

I am using Jquery UI date picker in my asp.net MVC app. All works fine in IE but in Chrome the default date picker is also visible, when I use JQuery UI it doesn't add the date to the box.

I have several options that are on here as possible solutions but nothing works.

The ViewModel is:

    [Required]
    [Display(Name = "Date of Birth")]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy/MM/dd}", ApplyFormatInEditMode = true)]
    public DateTime DateOfBirth { get; set; }

The View is:

            <div class="form-group">
                <div class="row">
                    <div class="col-md-3 col-md-offset-1">
                        @Html.LabelFor(model => model.DateOfBirth, htmlAttributes: new { @class = "control-label" })
                        @Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { @class = "form-control", placeholder = "01/12/80" } })
                        @Html.ValidationMessageFor(model => model.DateOfBirth, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>

The script for the date picker is :

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
<script type="text/javascript">
    $("#DateOfBirth").datepicker({
        format: "yyyy/MM/dd",
        startDate: "-120y",
        endDate: "-10y",
        startView: 2,
        calendarWeeks: true,
        defaultViewDate: { year: 1975, month: 01, day: 01 }
    });
</script>
}

I can't be the only one who needs to solve this issue and hopefully it already has been. Thanks

score 2 · Accepted Answer · edited May 23 '17 at 11:51

2

Try disable the default datepicker. See this post: Disable native datepicker in Google Chrome

edited May 23 '17 at 11:51

Community

1
1

answered Oct 02 '15 at 21:47

Marcus Abrahão

696
1
8
18

Hasn't made a difference unfortunately @Marcus Abrahao – Phill Sanders Oct 02 '15 at 21:53
did you inspect the element to make sure DateOfBirth is his id? – Marcus Abrahão Oct 02 '15 at 21:55
Ok, sorry.. I miss understood your question. I guees your input is type date, correct? So you have to disable the default datepicker – Marcus Abrahão Oct 02 '15 at 22:02
if so... try this post http://stackoverflow.com/questions/11320615/disable-native-datepicker-in-google-chrome – Marcus Abrahão Oct 02 '15 at 22:02
Excuse my lack of knowledge, but where would I place the answer : input[type="date"]::-webkit-input-placeholder{ visibility: hidden !important; } ? – Phill Sanders Oct 02 '15 at 22:06
In your css file or in a style tag – Marcus Abrahão Oct 02 '15 at 22:06
tried this on the editorfor @style = "input::- webkit - calendar - picker - indicator{display: none;}} })" and also in the site.css with no joy – Phill Sanders Oct 02 '15 at 22:15
You can't change Html.EditorFor to Html.TextBoxFor ? – Marcus Abrahão Oct 02 '15 at 22:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/91213/discussion-between-marcus-abrahao-and-phill-sanders). – Marcus Abrahão Oct 02 '15 at 22:17
I have tried that and it solves it but textboxfor looks very basic and I don't know how I can match its look to the editorfor – Phill Sanders Oct 02 '15 at 22:18
1

do you mean to use class and placeholder? @Html.TextBoxFor(model => model.DateOfBirth, new { @class = "form-control", placeholder = "01/12/80" } ) – Marcus Abrahão Oct 02 '15 at 22:45

JQuery UI datepicker not working in Chrome

1 Answers1