CODEWITHSUNDEEP
jqueryasp.net-mvcdatepicker
Craig Roberts
Craig Roberts

Reputation: 171

Getting jQuery DatePicker to work in Internet Explorer 9

I know this is common problem in the forums and I've read many pages, but still cannot get it to work so any help would be greatly appreciated.

I am building an MVC 5 application but I need to support IE9 which is primary Browser for end users. Therefore I can assume HTML 5 support.

From readings it would seem the most common option for non-HTML5 DatePicker is to use jQuery.

What I've done to get this working:

Added to _Layouts.cshtml file:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

In my view file I have added:

<div>
    <div id="datepicker"></div>
    <script>
        $("#datepicker").datepicker();
    </script>
</div>

which works fine and shows a datepicker object.

However, I am trying to associate this to my model's FromDate property so I've tried: (borrowed from Remove time from ASP MVC @Html.TextBoxFor Control using jQuery datepicker)

    <div>
        <div class="col-md-2">
            Start date
        </div>
        <script>
            $("#datepicker").datepicker();
        </script>
        <div>
            @Html.TextBox("StartDate", "", new { @class = "datepicker" } ))
        </div>
    </div>

But it does not show a datepicker pop-up object - in IE11 or Chrome on my dev PC.

Any suggestions please?

Regards Craig

Upvotes: 0

Views: 3465

Answers (1)

Jamie Dunstan
Jamie Dunstan

Reputation: 3765

Change your script from

$("#datepicker").datepicker();

to

$(".datepicker").datepicker();

The first selector is looking for an element with the ID of "datepicker" whereas you are interested in elements with the datepicker class.

You should also wrap your script in a document ready handler to ensure that the DOM is ready to rock. See here for info.

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

Upvotes: 2

Related Questions