asp.net mvc date picker is not working

Question

I did this example using the pluralsight video but the date picker is just not appearing.

1st. I created the template.

@model System.DateTime?
@Html.TextBox("",ViewData.TemplateInfo.FormattedModelValue,new {
    data_datepicker = true
});

2nd. I created the line in my .js file

$(document).ready(function () {
    $(":input[data-datepicker]").datepicker();
}

That should be all to make it work according to the video.

I am also including the jquery files of course

> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
> type="text/javascript"></script> <script
> src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
> type="text/javascript"></script> <script
> src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"
> type="text/javascript"></script> <script
> src="@Url.Content("~/Scripts/HR.js")" type="text/javascript"></script>

The complete resulting html (resumed) seems fine:

<html><head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>
</head>
<body> 

<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script src="/Scripts/HR.js" type="text/javascript"></script>



<form action="/ApplicantPosition/Create" enctype="multipart/form-data" method="post">    <fieldset>
      <div class="editor-label">
            <label for="appliedDate">Date applied</label>
        </div>

        <div class="editor-field">
            <input data-datepicker="True" data-val="true" data-val-required="Applied date is required" id="appliedDate" name="appliedDate" type="text" value="" />;

</body>

</html>

When running on firefox/chrome, do you see any javascript error in the console? — goenning
– goenning, Commented Oct 25, 2011 at 13:59
I also found out that you forgot to add ); at the end of your document ready function. — goenning
– goenning, Commented Oct 25, 2011 at 14:02

Darin Dimitrov · Accepted Answer · 2011-10-25 14:05:06Z

2

You are not closing the document ready function. Try like this:

$(document).ready(function () {
    $(":input[data-datepicker]").datepicker();
});

Notice the additional ); at the end of my script which is missing in yours.

answered Oct 25, 2011 at 14:05

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

2 Comments

Luis Valencia Over a year ago

it works but the picker is transparent and I can see the other controls in the back. any idea?

Darin Dimitrov Over a year ago

@Luis, add the corresponding CSS. It's not bundled with ASP.NET MVC 3, you will have to download it or use a CDN which is even better:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />

. There is also this one:

<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />

. Of course there are other themes and colors. Up to you to pick the one you like. Take a look at the demos here: jqueryui.com/demos/datepicker

Nicola Peluchetti · Accepted Answer · 2011-10-25 14:04:42Z

1

I think you should do:

$("input[data-datepicker='True']").datepicker();

if you are using the attribute equals selector.
I'd do:

$("input#appliedDate").datepicker();

edit - ther is an error in your function (you forgot the closing ); )

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

edited Oct 25, 2011 at 14:04

answered Oct 25, 2011 at 13:57

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

3 Comments

Luis Valencia Over a year ago

hey cool, thanks, is there a way to use a different theme? the picker is shown but it shows in top of other controls so I can see the days, but also the controls on the back.

Nicola Peluchetti Over a year ago

there is an error in your document.ready(): look at my post i update it

Luis Valencia Over a year ago

it works but I still the controls in the back. the picker is transparent.

Collectives™ on Stack Overflow

asp.net mvc date picker is not working

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related