jQuery UI datepicker doesn't work in IE7

Question

I've have finally got the datepicker to work on my MVC demo site. One thing though it doesn't work when browsing with IE7, I havn't testet with IE6 yet. Does anyone know how to fix this problem or can't I use jQuery if I want IE users to be able to pick dates?

It works like a charm on Safari and Firefox, except for it's position when dropping down.

Please try for yourself on my demo site: Demo site

Click the link "Boka plats" on the menu. then login with: email: [email protected] password: tester

Answer 1

Is this helpful at all?

EDIT: Yes, I think you need to wrap your DatePicker() in $(document).ready(function() EX:

<script type="text/javascript"> 
        $(document).ready(function() {          
            $("#Date").datepicker($.extend({},
                $.datepicker.regional["sv"], {
                    onSelect: function(date) {
                        //alert("The chosen date is " + date);
                    }, 
                    minDate: "0d",
                    maxDate: new Date(2009, 3 - 1, 26),
                    showStatus: true,
                    showWeeks: true,
                    highlightWeek: true, 
                    showOn: "both",
                    numberOfMonths: 1,
                    firstDay: 1,
                    buttonImage:"../../Content/Images/calendar.gif",
                    buttonImageOnly: true,
                    showAnim: "scale", 
                    showOptions: { 
                        origin: ["top", "left"] 
                    }, 
                }));
        });   
    </script>

Answer 2

If I'm not mistaken, you have a trailing comma in your parameter list. IE will choke on trailing commas all the time in js.

Try this:

    $(function() {            
$("#Date").datepicker($.extend({},
    $.datepicker.regional["sv"], {
        onSelect: function(date) {
        }, 
        minDate: "0d",
        maxDate: new Date(2009, 3 - 1, 26),
        showStatus: true,
        showWeeks: true,
        highlightWeek: true, 
        showOn: "both",
        numberOfMonths: 1,
        firstDay: 1,
        buttonImage:"../../Content/Images/calendar.gif",
        buttonImageOnly: true,
        showAnim: "scale", 
        showOptions: { 
            origin: ["top", "left"] 
        }
    }));

});

Answer 3

Thanx guys, especially steve_c, for your help.