Using jQuery Date Picker in MVC application

Question

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?

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>

It looks like it's not loading the (correct) jquery ui css - Look at the rendered HTML (browser, open page, view source) and check the correct css is being loaded (also use browser network tab) to see if there are any 404s. — fdomn-m
– fdomn-m, Commented Sep 6, 2017 at 13:33
This file did not exist actually. The jQuery file i added is in Scripts/jquery-ui-1.12.1 — Metzer
– Metzer, Commented Sep 6, 2017 at 13:41
Should add, I've amended this now to point to the correct file, but i still get the same issue — Metzer
– Metzer, Commented Sep 6, 2017 at 13:41
The style sheet looks incorrect: <link href="/Scripts/jquery-ui-1.12.1" - it would likely end in .css at a minimum. (I seem to recall that jquery-ui puts its css with the js so may be under /Scripts rather than /Content. — fdomn-m
– fdomn-m, Commented Sep 6, 2017 at 14:02

Joe Schmoe · Accepted Answer · 2017-09-07 12:54:12Z

1

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).

edited Sep 7, 2017 at 12:54

answered Sep 6, 2017 at 17:59

Joe Schmoe

1,8005 gold badges26 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using jQuery Date Picker in MVC application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related