ASP.Net @Html.TextBox Datepicker

Question

I am trying to put in a datepicker on a @Html.TextBox. The date field is to be used as a search criteria field so that I can compare a date entry to a date in the table. This is what I have for my scripts:

<link href="~/Content/ui_1.10.4_themes_smoothness_jquery-ui.css" rel="stylesheet" />
<script src=" ~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>
$(document).ready(function () {
    $("#getdate").each(function () {
        $(this).datepicker();
    });
});

This is what I have for my TextBox:

Date Received: @Html.TextBox("SearchString5",  new {@class="getdate"}, ViewBag.CurrentFilter as string)

What it results in is that the words new {@class="getdate"} showing up in the TextBox.

Try ".getdate" rather than #getdate

Adam
– Adam

2016-06-29 19:25:49 +00:00
Commented Jun 29, 2016 at 19:25 — Adam
– Adam, Commented Jun 29, 2016 at 19:25

Grizzly · Accepted Answer · 2016-06-29 19:43:28Z

1

That is because your parameters are messed up for the overloaded method of Html.TextBox..

They should be like this:

public static MvcHtmlString TextBox(
    this HtmlHelper htmlHelper,
    string name,
    object value,
    string format,
    object htmlAttributes
)

so with your specific case:

@Html.TextBox("SearchString5",ViewBag.CurrentFilter as string, new {@class="getdate"})

Also, in your JS, you are referencing an ID with the #.. but rather you need to reference a class with a ..

$(document).ready(function () {
    $(".getdate").each(function () {
        $(this).datepicker();
    });
});

edited Jun 29, 2016 at 19:43

answered Jun 29, 2016 at 19:29

Grizzly

5,9559 gold badges63 silver badges117 bronze badges

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

Comments

Krishna · Accepted Answer · 2016-06-29 19:28:58Z

0

The whole code looks buggy, first of all you are adding a class getdate and in jquery you are using id selector

$(document).ready(function () {
$("#getdate").each(function () {
    $(this).datepicker();
});
});

this should be

$(document).ready(function () {
    $(".getdate").each(function () {
        $(this).datepicker();
    });
});

Second thing you are missing value parameter in helper, it should be like this

Date Received: @Html.TextBox("SearchString5",ViewBag.CurrentFilter as string,  new {@class="getdate"})

answered Jun 29, 2016 at 19:28

Krishna

1,9831 gold badge14 silver badges24 bronze badges

Comments

Ehsan Sajjad · Accepted Answer · 2016-06-29 19:27:47Z

0

Your order of parameters is not correct. It should be like, first element name, then value and then html attributes. write it this way:

@Html.TextBox("SearchString5",ViewBag.CurrentFilter as string, new {@class="getdate"})

See this overload in documentation at MSDN

and now in jquery use class selector, as id should be unique for each element for html:

$(document).ready(function () {
$(".getdate").each(function () {
    $(this).datepicker();
});

answered Jun 29, 2016 at 19:27

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

1 Comment

Ethel Patrick Over a year ago

Thank-you everyone. I had tried the .getdate previously however I had the last two parameters in the wrong order. I got my datepicker however my date search still doesn't work.

Eric Phillips · Accepted Answer · 2016-06-29 19:28:13Z

0

Your last two parameters are in the wrong order

Try:

Date Received: @Html.TextBox("SearchString5",ViewBag.CurrentFilter as string,  new {@class="getdate"})

Also your jquery is looking for id=getdate but your html is specifying the class as getdate

answered Jun 29, 2016 at 19:28

Eric Phillips

9201 gold badge7 silver badges25 bronze badges

Comments

Nikhil Vartak · Accepted Answer · 2016-06-29 19:28:48Z

0

You are using incorrect parameter order. It should be:

@Html.TextBox("SearchString5", "6/30/2016", new { @class="getdate" })

See this overload form:

https://msdn.microsoft.com/en-us/library/system.web.mvc.html.inputextensions.textbox(v=vs.118).aspx#M:System.Web.Mvc.Html.InputExtensions.TextBox%28System.Web.Mvc.HtmlHelper,System.String,System.Object,System.Object%29

answered Jun 29, 2016 at 19:28

Nikhil Vartak

5,1473 gold badges29 silver badges36 bronze badges

2 Comments

Grizzly Over a year ago

just wondering, wouldn't there need to be null parameter in between the value and the htmlAttributes?

Nikhil Vartak Over a year ago

That's just another overload form to accept format parameter. See msdn.microsoft.com/en-us/library/… Although both work why do we need to pass an argument that is null?

Collectives™ on Stack Overflow

ASP.Net @Html.TextBox Datepicker

5 Answers 5

Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related