CODEWITHSUNDEEP
javascriptc#jqueryasp.netdatepicker
Ethel Patrick
Ethel Patrick

Reputation: 975

ASP.Net @Html.TextBox Datepicker

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.

Upvotes: 0

Views: 936

Answers (5)

Grizzly
Grizzly

Reputation: 5943

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

Upvotes: 1

Krishna
Krishna

Reputation: 1985

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"})

Upvotes: 0

Nikhil Vartak
Nikhil Vartak

Reputation: 5117

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

Upvotes: 0

Eric Phillips
Eric Phillips

Reputation: 920

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

Upvotes: 0

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

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

Upvotes: 0

Related Questions