Getting jQuery DatePicker to work in Internet Explorer 9

Question

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

So this has nothing to do with IE9 at all, then. You said the datepicker works in IE9, and that your code associating it *doesn't* work in IE11 or Chrome (or, presumably, IE9). It's best not to focus people's attention on something that isn't the problem. — T.J. Crowder, Dec 12 '14 at 12:40

Jamie Dunstan · Answer 1 · 2014-12-12T12:44:50.520

2

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>

edited Dec 12 '14 at 12:44

answered Dec 12 '14 at 12:39

Jamie Dunstan

3,725
2
24
38

1

I believe he'll also have to move that script tag to **after** the `div`, as the script runs immediately, and so the element(s) won't exist yet. – T.J. Crowder Dec 12 '14 at 12:42
Hi & thanks for your comments. I changed so View now includes:

Start date

@Html.TextBox("StartDate", "", new { @class = "datepicker" }))

IE gives error: "Line: 117 Error: Object doesn't support property or method 'datepicker'". Line 117 is: (".datepicker").datepicker(); Craig – Craig Roberts Dec 12 '14 at 12:54
@JamieDunstan: *"You should also wrap your script in a document ready handler..."* Best practice is just to put the scripts at the end of `
`, you only need `ready` if you don't control where the scripts go.
– T.J. Crowder Dec 12 '14 at 13:11
@CraigRoberts: Just look at that line for a moment. What's missing from the front of it? Hint: Right now you're trying to call `.datepicker` on a string. – T.J. Crowder Dec 12 '14 at 13:12
1

I missed the $ in front of (".datepicker").datepicker. – Craig Roberts Dec 12 '14 at 13:45

Getting jQuery DatePicker to work in Internet Explorer 9

1 Answers1