I've made a page (ASP.NET MVC3 and razor view) with a working JQuery datepicker. Or at least it works until I switch my theme with the themeswitcher widget. With the theme switched, I then bring up the date picker, and the widget has a heading something like this:
Prev Next
August
...as usual...
Unfortunately within about a second, the heading becomes corrupted; The 'Prev Next' text is superimposed with an image ribbon of left, right, up, down arrows. The datepicker works correctly, but its header is jumbled text and images. I thought perhaps my own site styling was conflicting with jquery, so I removed all of my styling entirely. Yet the problem persisted.
When I compare my broken datepicker with a sample on the jquery site, I see two of those same arrow images showing in the header, on either side of the month like this:
<- August ->
So I can see how the arrows were meant to be rendered. I can also see the words "Prev Next" never appear.
To see how bare bones this example is, here is what my head element looks like:
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<script src="@Url.Content("~/Scripts/jquery-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function () {
$("#MaxAge").datepicker();
$('#switcher').themeswitcher();
});
</script>
</head>
These bad results occur on both IE 9 and Chrome. What am I doing wrong?
