CODEWITHSUNDEEP
c#jqueryasp.net-mvc
Metzer
Metzer

Reputation: 241

Using jQuery Date Picker in MVC application

So I am trying to have my date entry field use a jQuery date picker. I've added the following script code in my view:

@section Scripts {

@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/cssjqryUi")

<script type="text/javascript">

 $(document).ready(function () {
     $('input[type=datetime]').datepicker({
         dateFormat: "dd/M/yy",
         changeMonth: true,
         changeYear: true,
         yearRange: "-60:+0"
     });

});
</script>

}

However the formatting of the actual datepicker in action seems wrong - how would I fix this?

enter image description here

Should add, I've amended this now to point to the correct file, but I still get the same issue

The following appears when I 'View Page Source'

<script src="/Scripts/jquery-1.12.4.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<link href="/Scripts/jquery-ui-1.12.1" rel="stylesheet"/>
<script type="text/javascript">
 $(document).ready(function () {
     $('input[type=datetime]').datepicker({
         dateFormat: "dd/M/yy",
         changeMonth: true,
         changeYear: true,
         yearRange: "-60:+0"
     });
 });
</script>

Upvotes: 0

Views: 269

Answers (1)

Joe Schmoe
Joe Schmoe

Reputation: 1768

I had the same exact problem but only after publishing my application to production environment.

Look at your network tab in Developer Tools and you will most likely see Error 404 or 403 when you refresh the page.

The problem is related to jQuery UI CSS bundling and minification performed by ASP.Net MVC. When application is executed it is denied access to bundled/minified CSS.

The solution for me was to explicitly allow IUSR user account "Read", "Read & execute", "List folder contents permissions" on web application folder (in some SO posts people mentioned that IIS_IUSRS group should also have the same access but for me it was already inherited from WWWROOT folder).

Upvotes: 1

Related Questions