How to Use HTML.Textboxfor with Input Type=Date

How to use Html.TextBoxFor with input type=date?

Try this;

@Html.TextBoxFor(model => model.CreationDate,
           new { @type = "date", @Value = Model.CreationDate.ToString("yyyy-MM-dd") })

You have to handle null when setting the value.

OR

If you can change the Model you can try this;

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime CreationDate{ get; set; }

and in your view you can use EditorFor helper.

@Html.EditorFor(model => model.CreationDate, new { @type = "date" })

MVC TextBoxFor type date is it possible to use custom format?

So we managed to get a JQuery to work in our current project, we had to reorder and structure already present javascript references but that was actually a great thing because we cleaned things up a bit :). We used the JQuery DatePicker as suggested by Stephen Muecke (thank you again for all provided information) and thank you as well Tetsuya because i didn't know anything about the DefaultModelBinder and now i know a little more :). Like always i learned something new, thank you!

Date is empty in view textboxfor when adding type date

There is actually a couple of issues here and I'll try to explain them.

The first problem is that date input accepts values only in yyyy-mm-dd format and displays them based on the browser localization settings:

One thing to note is that the displayed date format differs from the actual value — the displayed date format will be chosen based on the set locale of the user's browser, whereas the date value is always formatted yyyy-mm-dd.

This means you need to change your DataFormatString and also set ApplyFormatInEditMode to true:

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

However it still won't have any effect because in order for your custom format to be taken into account you need to use Html.EditorFor:

@Html.EditorFor(model => model.DateStart,
    new { htmlAttributes = new { @class = "form-control", placeholder = "Invoice date" } })

Or you can ignore DisplayFormatAttribute and specify the format in the Html.TextBoxFor:

@Html.TextBoxFor(model => model.DateStart, "{0:yyyy-MM-dd}",
    new { @class = "form-control", placeholder = "Invoice date", type = "date" })

Date only from TextBoxFor()

[DisplayName("Start Date")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime StartDate { get; set; }

Then:

<%=Html.EditorFor(m => m.StartDate) %>

Why my textBoxFor type=date doesn't display date?

If you want to set default value to date input,its value format need to be
value="yyyy-mm-dd".And if your DT_REFERENCE is datetime type,try to do like this:

<input type="date" asp-for="DT_REFERENCE" value=@Model.DT_REFERENCE.ToString("yyyy-MM-dd").Split(" ")[0] />

result:

MVC 4 Razor adding input type date

I managed to do it by using the following code.

@Html.TextBoxFor(model => model.EndTime, new { type = "time" })

MVC Razor - Default Value as Current date for textbox type date

As Stephen Muecke said, you need to set the property's value on the model.

// in controller method that returns the view.
MyModel model = new MyModel();
model.Date = DateTime.Today;

return View(model);

And your Razor would be:

@Html.TextBoxFor(x => x.Date, "{0:yyyy-MM-dd}", new { @class = "form-control", @type = "date"})

Note that the id and the name properties should be automatically assigned to the property name when using a For method, such as @Html.TextBoxFor(), so you don't need to explicitly set the id attribute.

---

Related Topics