I have integrated the jQuery UI 1.11.4 with a customized Sunny theme. Take a look at how the date picker should appear below:
https://i.sstatic.net/1eEMU.png
To keep the current website style intact, I am using CSS Scope while applying the downloaded theme. Below is the code snippet within my page:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/scripts/custom/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/scripts/custom/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="/scripts/custom/jquery-ui.theme.css" />
<script type="text/javascript">
$(document).ready(function () {
$("#<%= txtSepDate.ClientID %>").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
maxDate: "+0D",
showOn: "button",
buttonImage: "/images/calendar.jpg",
buttonImageOnly: true,
buttonText: "Select date",
beforeShow: function () {
$(this).datepicker("widget").addClass("grace");
},
onClose: function () {
$(this).datepicker("widget").removeClass("grace");
}
});
});
</script>
Upon accessing the page, this is the outcome I see:
https://i.sstatic.net/s2zIU.png
Notably, my output lacks a few UI elements compared to the example:
- The weekdays text
- The calendar border
- The calendar background
What might be the cause of these discrepancies?