How to bind a textbox to a datetime field but display only its date part (in ASP.MVC)?

Question

I have a view with textbox bound to a DateTime model field.

The view:

@Html.TextBoxFor(model => model.StartDate, new { @class = "datepicker", id = "startDate" })

The model:

[Required(ErrorMessageResourceType = typeof(Resources.ValidationMessages), ErrorMessageResourceName = "GeneralRequired")]
[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
[DataType(DataType.Date)]
[Display(Name = "StartDate", ResourceType = typeof(Resources.Something))]
public DateTime? StartDate { get; set; }

View uses jQuery datepicker to handle date input. Jquery generates only date, but I as far as I know there's no only date type in C#.

I use also custom DateTime model binder but it's rather to big to post its code (tl;dr ;)).

When user input for instance 15-01-2015 in the textbox and post it to the method the model binder converts it properly (to a 15-01-2015 12:00). The problem is when the validation is fired because there are two datetime fields on the form and if user enters only one of them then action method returns view with validation messages. Already entered field should be still filled obviously. The problem is that when controller's action method returns view it places a date time into textbox, not only a date.

Is there any method we can use to pass only date instead of date and time to a bound field in a view? Or maybe keep field bound but display only value.Date in textbox?

EDIT:

I've tried to apply Hugo Delsing's solution but faced next issue. Basically we're going to use EditorTemplate for DateTime field of the model. DateTime.cshtml looks as follows:

@model System.DateTime?
@if (Model == null)
{
    @Html.TextBox(
   string.Empty,
   "",
   new { @class = "datepicker", @type = "text" })
}
else
{
    @Html.TextBox(
   string.Empty,
   Model.ToString("dd-MM-yyyy"),
   new { @class = "datepicker", @type = "text" })
}

The problem appears as far as I understand in the line

Model.ToString("dd-MM-yyyy")

Because thrown error is

Shared\EditorTemplates\DateTime.cshtml(13): error CS1501: No overload for method 'ToString' takes 1 arguments

As far as I understand it's like that else is evaluated always, am I right? Is there any solution to achieve what I want without moving if statement to a main view and building something like this?

@if(model.StartDate.HasValue)
{
   @Html.EditorFor(model => model.StartDate, "TemplateFirst")
}
else
{
   @Html.EditorFor(model => model.StartDate, "TemplateSecond")
}

Answer 1

The only way I got the working properly was to create a new EditorTemplate.

Create a view in ~/Views/Shared/EditorTemplates called DateTime.cshtml and put the following content in it.

@model System.DateTime?
@{
    var val = "";
    if (Model != null)
    {
        val = ((DateTime)Model).ToString("dd-MM-yyyy");
    }
}
@Html.TextBox(
   string.Empty, 
   val,
   new { @class="datepicker", @type = "text"})

Now if you call the default editor template it will work and always show the datepicker for dates.

<div class="editor-container">
    <div class="editor-label">
        @Html.LabelFor(model => model.StartDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.StartDate)
        @Html.ValidationMessageFor(model => model.StartDate)
    </div>
</div>

The @type = "text" is not realy needed as Stephen Muecke pointed out. It's the default. You could add/change it to date to have the HTML5 datepicker triggered. Keep in mind that it could show the HTML5 datepicker in 'MM-dd-yyyy' and then the value can't be validated.

Answer 2

If you are using jQuery datepicker, then you need to format the date in the plugin code and in the TextBoxFor() method

@Html.TextBoxFor(m => m.StartDate, "{0:dd-MM-yyyy}", new { @class = "datepicker" })

and the script

$('.datepicker').datepicker({ dateFormat: 'dd-mm-yy' })

Side note: you do not need to set the id attribute (the helper adds id="StartDate" for you)

Note also you do not need [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)] or [DataType(DataType.Date)] on the property when using TextBoxFor(). Those attributes are only respected when using @Html.EditorFor() and result in generating <input type="date" ...> which will render the browsers HTML5 datepicker. In any case, it needs to be DataFormatString = "{0:yyyy-MM-dd}" (ISO format) to bind correctly. Note that type="date" is only supported in some modern browsers, and not at all in FireFox yet)

A custom EditorTemplate for DateTime is not necessary, but if you were to do so it would be just

@model System.DateTime?
@Html.TextBoxFor(m => m.StartDate, "{0:dd-MM-yyyy}", new { @class = "datepicker" })

There is no need to test for null as per the accepted answer. This solution is inflexible because you cant pass html attributes (without some modifications to pass then as additionViewData as per this example)

You also mentioned using a custom ModelBinder which was too big to post. It's unclear why you would need this. If you set the server culture to accept that format then its not required, for example

<system.web>
  <globalization culture="en-AU" uiCulture="en-AU"/>

but in any case, it should not be more than a few lines of code. Refer this example

Finally if you include @Html.ValidationMessageFor(m => m.StartDate) then you can use the Globalisation Nuget Package (globalize.js) or you can override the $.validator.methods.date method, but since you can set options such as minimum and maximum dates in the jQuery datepicker, use of ValidationMessageFor may not be necessary.