Add datepicker to Asp.net MVC app

Question

I am building an Asp.net MVC app and would like to add a datepicker.

I have this code in my form in the view

@Html.LabelFor(b => b.Date)
@Html.EditorFor(b => b.Date, new {id = "news_date"})

This is the javascript I am using to make a datepicker.

$(document).ready(function () {
    $("#news_date").datepicker({ dateFormat: 'dd/mm/yy' });
});

I would like it so when the user clicks on the textbox a datepicker appears and they can then select a date. currently nothing happens when I click on the text box so I think that there is either an issue with the javascript or with linking it to the textbox. Any ideas?

Edit: Web console shows this error:

TypeError: $(...).datepicker is not a function

Edit: Edit: This is the code that is compiled and taken from the browser console:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Enter Transaction - My ASP.NET MVC Application</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css"/>
        <link href="/Content/site.css" rel="stylesheet"/>

        <script src="/Scripts/modernizr-2.6.2.js"></script>


    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><a href="/">your logo here</a></p>
                </div>
                <div class="float-right">
                    <nav>
                        <ul id="menu">
                            <li><a href="/">Home</a></li>
                            <li><a href="/Home/About">About</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">

            <section class="content-wrapper main-content clear-fix">
                <script type="text/javascript">
    $(document).ready(function () {
        $("#Date").datepicker({ dateFormat: 'dd/mm/yy' });
    });
</script>



<h2>Enter Transaction</h2>
<form action="/Home/EnterTransaction" method="post">        <p>
            <label for="Type">Type</label>
            <select id="TypeItems" name="TypeItems"><option value="0">Type1</option>
<option value="1">Type2</option>
</select>
            <br />
            <label for="Date">Date</label>
            <select id="UserItems" name="UserItems"><option value="0">User1</option>
<option value="1">User2</option>
</select>
            <br />
            <label for="Date">Date</label>
            <input type="text" id="news_date" name="news_date" />
            <input class="text-box single-line" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="Date" name="Date" type="date" value="12/01/2014" />


        </p>
        <input type="submit" value="Submit">
        <p></p>
</form>


            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; 2014 - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>
        <script src="/Scripts/jquery-2.0.3.js"></script>



    </body>
</html>

@IronGeek could you post an answer with the references that i would need and the locations of those references? — brian4342
– brian4342, Commented Jan 12, 2014 at 19:15
@BrianPeach I could, but Raphaël Althaus already did that :) — IronGeek
– IronGeek, Commented Jan 12, 2014 at 19:25

Raphaël Althaus · Accepted Answer · 2014-01-12 19:24:58Z

2

Two things :

First, be sure you have references to jquery and jqueryui.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css"/>

You also need jquery ui css referened.

Second, there's no overload of EditorFor taking htmlattributes as parameters.

You should rather do

@Html.LabelFor(b => b.Date)
@Html.EditorFor(b => b.Date)

and for jquery part

$(document).ready(function () {
    $("#@Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'dd/mm/yy' });
});

edited Jan 12, 2014 at 19:24

answered Jan 12, 2014 at 19:07

Raphaël Althaus

60.6k6 gold badges106 silver badges127 bronze badges

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

7 Comments

brian4342 Over a year ago

I have added the references to jquery and jqueryui into the <head> of the _layout.cshtml, and i have used your jquery method but its still not working. how do i reference the jquery ui css?

Raphaël Althaus Over a year ago

@BrianPeach added the jquery ui css. Now, could you say what you have for error in console, if you still have ?

Raphaël Althaus Over a year ago

@BrianPeach version for jquery was bad, by the way.

brian4342 Over a year ago

Still getting the same error. I have added the changed to the <head> of the _layout.cshtml with the references and still nothing

Raphaël Althaus Over a year ago

@BrianPeach The first for jquery script. Could you post the source code of your page (relevant parts) in a jsFiddle, maybe ? By the way, did you refresh your page (Ctrl + F5) ?

|

Collectives™ on Stack Overflow

Add datepicker to Asp.net MVC app

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related