CODEWITHSUNDEEP
asp.netjqueryasp.net-mvcdatepicker
Bernard
Bernard

Reputation: 652

ASP.NET MVC - jquery datepicker

Ok, so I'm new to ASP.NET MVC and JQuery.

I have followed the following example to the letter, and I'm not able to get the datepicker working:

http://codesprouts.com/post/Creating-A-DatePicker-Extension-In-ASPNet-MVC.aspx

Can anyone tell me if there are any ticks or gotchas with this?

Bernard.

Upvotes: 8

Views: 21137

Answers (7)

John M
John M

Reputation: 14668

This blog post provides an excellent overview of integrating the jQuery datepicker into a MVC 3 site.

Some of other samples that I could find were focused on MVC1 and 2.

Upvotes: 3

DBman
DBman

Reputation:

Tabs 

            UL.tabNavigation {
                list-style: none;
                margin: 0;
                padding: 0;
            }

            UL.tabNavigation LI {
                display: inline;
            }

            UL.tabNavigation LI A {
                padding: 3px 5px;
                background-color: #ccc;
                color: #000;
                text-decoration: none;
            }

            UL.tabNavigation LI A.selected,
            UL.tabNavigation LI A:hover {
                background-color: #333;
                color: #fff;
                padding-top: 7px;
            }

            UL.tabNavigation LI A:focus {
                    outline: 0;
            }

            div.tabs > div {
                    padding: 5px;
                    margin-top: 3px;
                    border: 5px solid #333;
            }

            div.tabs > div h2 {
                    margin-top: 0;
            }

            #first {
                background-color: #f00;
            }

            #second {
                background-color: #0f0;
            }

            #third {
                background-color: #00f;
            }

            .waste {
                    min-height: 1000px;
            }
-->
</style>

<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<link href="CSS/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

   <script  type="text/javascript">
       $(function() {
           $("#datepicker").datepicker();
       });

Date:

Download the js files from JQUERY and place them in a local folder on your machine, if you are using Visual Studio simply drag the file onto your designer surface. Don't forget to link the CSS file as well. What I do for every project is from my download location I add the js files into a folder called Scripts in my project, and css files in a folder called CSS.

Upvotes: 0

TwinForms
TwinForms

Reputation: 166

One thing I found is if your id has square brackets or dots, then datepicker wont work. Try to replace them with under score or something else.

Upvotes: 0

Todd Brooks
Todd Brooks

Reputation: 1167

I've had difficulty in the past using the jQuery datepicker when I was using the entire jquery UI css in one file. what I ended up doing, and what seemed to work for me, was to include the different jQuery UI CSS files separately, as needed, in my page or master page. When I included the datepicker in a separate CSS file, it worked.

YMMV

Upvotes: 0

David
David

Reputation: 15350

Use jquery hosted by google.

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js">
</script>

You will also need to link to your desired css.

$().ready(function()
{
    $('#from').datepicker({ dateFormat:'yy-mm-dd' });
});

<html>
...
<input id="from" class="date-field" name="from" type="text" >

Upvotes: 11

David Robbins
David Robbins

Reputation: 10046

See if you can get the datepicker working first in HTML only. That way you can eliminate errors introduced by incorrect file name in src tags, etc. Once you have that working you should be able to add it to the MVC solution the article describes.

Upvotes: 0

Steve Willcock
Steve Willcock

Reputation: 26839

Without more specific info it's hard to tell what's going wrong.

One obvious thing to get you started, make sure that the src tags for your script files are correct. The filename name of the jquery-ui .js file changes if you download a standard or custom version, so it's worth double checking that the script tags in your code match the names of the files. The 'Net' tab of the firebug addon for Firefox is a real help for quickly spotting files your page can't find - it highlights any unfound files in red - generally saves a lot of time.

Upvotes: 1

Related Questions