CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3jquery-ui
Luis Valencia
Luis Valencia

Reputation: 33988

asp.net mvc date picker is not working

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.

  1. 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>

Upvotes: 0

Views: 2617

Answers (2)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038730

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.

Upvotes: 2

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

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();
});

Upvotes: 1

Related Questions