Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE not rendering DatePicker for MVC5

I´m making an MVC5 site, as you already know. And now I just created a View using Crete template that has a BirthDate Field. Andit is not showing in IE and shows horibly in Chrome with lots of gliphs inside the textbox as you can compare in the image below.

enter image description here

What is going on and how can I make IE to show a date picker just as easy as Chrome does, and how to clena it up a bit. Those levers I think are useless and confusing.

Here is how I defined that property in my model

    [Display(Name = "Fecha de nacimiento")]
    [DataType(DataType.Date)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
    public DateTime BirthDate { get; set; }

and in the View

    <div class="form-group">
        @Html.LabelFor(model => model.BirthDate, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.BirthDate)

            @Html.ValidationMessageFor(model => model.BirthDate)
        </div>
    </div>
like image 387
Ricker Silva Avatar asked Mar 21 '23 00:03

Ricker Silva


2 Answers

If you don't like the built in datepicker (which is being rendered by the browser because it is input type="date"), then there are plenty of 3rd party plugins available such as jQuery UI.

One thing you will need to potentially change is instead of using EditorFor you might need to use TextBoxFor so the browser just treats it as a normal text box. Below is an example using jQuery UI:

@Html.TextBoxFor(m => m.BirthDate)

<script>
    $(function() {
        $('#BirthDate').datepicker();
    });
like image 95
Dismissile Avatar answered Mar 27 '23 21:03

Dismissile


Thanks to @Dissmissile I figure it out with bootstrap datepicker but a bit different in my view

@Html.TextBoxFor(model => model.Date, new { @class = "datepicker" })

then I added the next js code to configure format and behaviour

    $(document).ready(function () {
        $(".datepicker").datepicker({
            format: "yyyy/mm/dd",
            autoclose: true
        });
        $(".datepicker").datepicker('setValue', new Date());
    });
like image 44
Ricker Silva Avatar answered Mar 27 '23 19:03

Ricker Silva