jQuery datepicker not working on MVC4 application

Question

I am trying to introuduce jQuery datepicker to my MVC4 application but I cannot seem to get the click event to fire the datepicker widget. At http://jqueryui.com/datepicker/ they give a simple example of how to implement this and when I try locally it works as expected but on MVC4 application nothing:

My code is as follows:

<script src="@Url.Content("~/Scripts/jquery-2.0.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.js")" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('#expirydate').datepicker();
  });
</script>

<div class="nine columns bottom20">
  <div class="row">
     <h3>New Course details</h3>

      @using(Html.BeginForm("NewCourse","Admin",FormMethod.Post))
      {
        <div class="row">
          <div class="twelve columns" style="width:590px;">
            <div class="row">
              <div class="six columns">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" /><br />
              </div>
              <div class="six columns">
                <label for="author">Author:</label>
                <input type="text" id="author" name="author" /><br />
              </div>

              <div class="row">
                <div class="twelve columns" style="width:590px; margin-left:5px;">
                  <label for="description">Description:</label>
                  <input type="text" id="description" name="description" /><br />
                </div>
              </div>

              <div class="twelve columns" style="width:590px;">
              <div class="row">                    
                <div class="six columns">
                  <label for="participationpoints">Participation Points:</label>
                  <input type="text" id="participationpoints" name="participationpoints" /><br />
                </div>
                <div class="six columns">
                  <label for="expirydate">Expiry Date:</label>
                  <input type="text" id="expirydate" name="expirydate" /><br />
                </div>
              </div>
              </div>



              <div class="row">
                <div class="six columns">
                  <input type="hidden" id="uploaddate" name="uploaddate" /><br />
                </div>  
              </div>
            </div>
          </div>
        </div>            
          <div class="twelve columns"> 
          <input id="CourseSubmit" type="submit" value="Submit button" class="medium button bottom20"style="margin-left:210px; margin-top:-50px;" />
          </div> 
      }
    </div>   
  </div>

Any ideas what is going on here?

Other scripts in the layout are as follows:

<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/foundation.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/modernizr.foundation.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/slider-revolution/jquery.themepunch.plugins.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/slider-revolution/jquery.themepunch.revolution.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.carouFredSel-6.0.3-packed.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.touchSwipe.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/titan/js/jquery.titanlighbox.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/titan/js/prettify.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/meta-app-head.js")"></script>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src= "@Url.Content("~/Scripts/meta-app.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/filedrag.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/footable.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/footable.sortable.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/footable.filter.js.js")"></script>
<script  type="text/javascript" src="@Url.Content("~/Scripts/footable.paginate.js")"></script>

And my bundle config is as follows:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery.js",
                    "~/Scripts/foundation.min.js",
                    "~/Scripts/modernizr.foundation.min.js",
                    "~/Scripts/jquery{version}.js",
                    "~/Scripts/jquery.carouFredSel-6.0.3-packed.js",
                    "~/Scripts/jquery.touchSwipe.min.js",
                    "~/plugins/slider-revolution/jquery.thempunch.plugins.min.js",
                    "~/plugins/slider-revolution/jquery.thempunch.revolution.min.js",
                    "~/plugins/flexislider/jquery.flexslider.js",
                    "~/plugins/camera/scripts/camera.min.js",
                    "~/plugins/camera/scripts/jquery.easing.1.3.js",
                    "~/plugins/camera/scripts/jquery.mobile.customized.min.js",
                    "~/plugins/titan/js/jquery.titanlighbox.js",
                    "~/plugins/titan/js/prettify.js",
                    "~/Scripts/jquery.validate.min.js",
                    "~/Scripts/footable.js",
                    "~/Scripts/footable.sortable.js",
                    "~/Scripts/footable.filter.js",
                    "~/Scripts/footable.paginate.js",
                    "~/Scripts/jquery-2.0.2.js",
                    "~/Scripts/jquery-ui-1.10.3.js",
                    "~/Scripts/jquery.validate.unobtrusive.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-1.10.3.js",
                    "~/Scripts/jquery-ui-{version}.js"));

I had it included in my bundle config and was worried that this was not being called so i have specifically specified it in the html to point to the folder in which it is contained — Jay
– Jay, Commented Aug 24, 2013 at 16:18
Looks like you are rending jQuery twice, that could cause an issue. — asymptoticFault
– asymptoticFault, Commented Aug 24, 2013 at 16:56

asymptoticFault · Accepted Answer · 2013-08-24 17:07:25Z

1

You are rending jQuery twice, once in your layout and again on your view. This could be causing the issue you are seeing.

edited Aug 24, 2013 at 17:07

answered Aug 24, 2013 at 15:44

asymptoticFault

4,5392 gold badges22 silver badges25 bronze badges

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

7 Comments

Jay Over a year ago

Sorry I posted an edit during some changes, the id of the input is expirydate and this is why i used $('#expirydate').datepicker();

asymptoticFault Over a year ago

Ah ok, well that takes care of that problem then. So you are having the issue even now with the correction?

Jay Over a year ago

Yes issue remains, I was changing to datepicker as this was tag used in example which i noticed tied in with id of the form control, i tried this locally with expirydate as id of field and no problems but in mvc4 app nothing is shown

asymptoticFault Over a year ago

Check to make sure the jQuery files are being sent to the browser. Did you check for javascript errors in the debugger of whatever browser you are using? Are the jQuery files you're including here the same version as the ones you are using "locally"? What do you mean by locally exactly? You should be running the MVC application locally as well unless you are deploying it to a server and that is where you are having the issue.

Jay Over a year ago

Sorry when I say locally I mean creating a simple html file and included in this simple html file links to the same jquery files on the desktop

|

Eonasdan · Accepted Answer · 2013-08-24 16:11:02Z

0

the correct code:

$('#datepicker').datepicker();

check your css file jquery-ui.

Selector in jquery

#= ID

. = class

by some attribute

$('a[href=www.google.com]')

edited Aug 24, 2013 at 16:11

Eonasdan

7,8119 gold badges60 silver badges85 bronze badges

answered Aug 24, 2013 at 15:59

JohnTrack

4092 silver badges5 bronze badges

2 Comments

Jay Over a year ago

sorry was mistake in the post

Jay Over a year ago

I am now able to successfully choose an date and the textbox is being populated in the format MM/DD/YYYY but my date format is DD/MM/YYYY so when I chose 1st august (08/08/2013) no problem it works but if i choose 28th (08/28/2013) then I get a date exception error. Can I change the culture of the textbox using jQuery so that it posts in the format i am expecting on selection/

Collectives™ on Stack Overflow

jQuery datepicker not working on MVC4 application

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related