JQuery UI datepicker in Asp.Net MVC

Question

I have tried to use some of the widgets in JQuery UI on an Asp.Net MVC site without luck.

For example the basic datepicker from jQuery UI - functional demos.

I have created a simple MVC project and added the script references in Site.Master like this:

<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-personalized-1.5.3.min.js" type="text/javascript"></script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/ui.datepicker.css" rel="stylesheet" type="text/css" />"

In the Index.aspx file I have cleared all default content and added the following:

<script type="text/javascript">
    $("#basics").datepicker();     
</script>  
<input type="text" size="10" value="click here" id="basics"/>

The core jQuery works fine. Any clues?

See my tutorial which does this exactly. asp.net/mvc/tutorials/javascript/… — RickAndMSFT
– RickAndMSFT, Commented Mar 28, 2012 at 17:28
The link in your question is broken, does anyone know the correct link? — Ryan Gates
– Ryan Gates, Commented May 29, 2013 at 20:37

Frank Krueger · Accepted Answer · 2008-12-22 01:04:32Z

18

Make sure your initializer is called after the DOM is loaded:

$(document).ready(function() {
    $("#basics").datepicker();
});

jQuery ready event:

By using this method, your bound function will be called the instant the DOM is ready to be read and manipulated, which is when 99.99% of all JavaScript code needs to run.

answered Dec 22, 2008 at 1:04

Frank Krueger

71.2k48 gold badges165 silver badges212 bronze badges

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

Comments

Stuart Leeks · Accepted Answer · 2011-01-26 09:07:12Z

7

I've got a write-up of this with MVC 3 here: http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx

answered Jan 26, 2011 at 9:07

Stuart Leeks

4143 silver badges7 bronze badges

1 Comment

RickAndMSFT Over a year ago

Stuarts great blog motivated my tutorial asp.net/mvc/tutorials/javascript/…

Andy Hume · Accepted Answer · 2008-12-22 01:09:27Z

It looks like you are executing the JavaScript inline as the page loads. In which case the #basics selector won't be able to locate the input with id="basics" as it hasn't yet been parsed and rendered in to the document body.

Your solution may be as simple as as moving the script element in your code to a position after the input element.

Better still, subscribe to a document ready or document loaded event and execute the jQuery code in the handler of that event.

$(document).ready(function() {
    $("#basics").datepicker();
});

There's a number of advantages to that. You can be sure that the entire DOM is ready for use, and there is no dependency on the order of the source code meaning you could move the JavaScript to an external file in the future to take advantage of various caching mechanisms on the client-side.

fredo · Accepted Answer · 2014-04-25 04:37:28Z

Where in the page are you loading scripts & where are you calling the datepicker initialization?

Here is a sample of using jQuery shorthand document ready & css selectors to initialize datePickers more easily.

Here is the razor code for a sample input box (notice the "datefield" css class)

<div class="form-group">
    @Html.LabelFor(m => m.DateOfBirth, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.DateOfBirth, new { @class = "form-control datefield" })
    </div>
</div>

Here is the javascript needed to initialize any datepicker by css selector

$(function () {
    $(".datefield").datepicker();
});

I've put together a tutorial detailing the specifics & a sample ASP.NET MVC5 solution on github

http://prestoasp.net/using-the-jquery-datepicker-with-asp-net-mvc/ https://github.com/fredo007/i6technology/tree/master/InsuranceSales

Collectives™ on Stack Overflow

JQuery UI datepicker in Asp.Net MVC

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related