ASP.NET MVC error when displaying date and time fields in View

Question

Hello I’m having some problems presenting at View.

In the database I have this data recorded:

Starting date: (datetime) 1998-11-16 00:00:00.000

Date: (datetime): 1998-11-16 00:00:00.000

Time entered (time): 09:00:00.0000000

Timeleft (time): 18:00:00.0000000

Valorhora (money): 50.00

The value of the fields "Valorhora", "Datainicio" and "Datafim" are not shown in the VIEW.

And the "Input" field triggers this error: "Input string was not in correct format"

Model

[DataType(DataType.Currency)]
[Range(0, 100, ErrorMessage = "Valor deve estar entre {1} e {2}")]
[Display(Name = "Valor hora extra")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:C0}")]
public decimal? ValorHoraExtra { get; set; }

[DataType(DataType.Date)]
[Display(Name = "Ínicio do contrato")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
public DateTime? DataInicio { get; set; }

[DataType(DataType.Date)]
[Display(Name = "Fim do contrato")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
public DateTime? DataFim { get; set; }

[DataType(DataType.Currency)]
[Range(0, 100, ErrorMessage = "Valor deve estar entre {0} e {1}")]
[Display(Name = "Valor hora")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:C0}")]
public decimal? ValorHora { get; set; }

[DataType(DataType.Time)]
[Display(Name ="Horário de entrada")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = @"{0:HH:mm}")]
public TimeSpan? HorarioEntrada { get; set; }

[DataType(DataType.Time)]
[Display(Name = "Horário de saída")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = @"{0:HH:mm}")]
public TimeSpan? HorarioSaida { get; set; }

View

    <div class="form-group">
        @Html.LabelFor(model => model.DataInicio, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DataInicio, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.DataInicio, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.DataFim, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DataFim, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.DataFim, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.ValorHora, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ValorHora, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ValorHora, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.HorarioEntrada, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.HorarioEntrada, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.HorarioEntrada, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.HorarioSaida, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.HorarioSaida, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.HorarioSaida, "", new { @class = "text-danger" })
        </div>
    </div>

Another thing, in the browser, the data fields, are not capturing the value when selecting the date in the calendar. This occurs in Chrome. In Firefox, the calendar does not exist.

What is wrong in the code for these errors to occur?

Answer 1

It’s not gonna work here:

[DataType(DataType.Date)]
[Display(Name = "Ínicio do contrato")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
public DateTime? DataInicio { get; set; }

[DataType(DataType.Date)]
[Display(Name = "Fim do contrato")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
public DateTime? DataFim { get; set; }

To [DataType(DataType.Date)], the DisplayFormat must be, yyyy-MM-dd, by specification of <input type="date">, which follows RFC3339:

[DataType(DataType.Date)]
[Display(Name = "Ínicio do contrato")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime? DataInicio { get; set; }

[DataType(DataType.Date)]
[Display(Name = "Fim do contrato")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime? DataFim { get; set; }

For financial value, the DataFormatString is also wrong:

[DataType(DataType.Currency)]
[Range(0, 100, ErrorMessage = "Valor deve estar entre {0} e {1}")]
[Display(Name = "Valor hora")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:C0}")]
public decimal? ValorHora { get; set; }

Should be:

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:F2}")]
public decimal? ValorHora { get; set; }

But I’d rather use @Html.TextBoxFor along with the JS jQuery Mask Money, whose visual result looks better, so I don’t use [DisplayFormat] for financial field.

For the hour fields, the DateFormatString gets lost using its format:

[DataType(DataType.Time)]
[Display(Name ="Horário de entrada")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = @"{0:HH:mm}")]
public TimeSpan? HorarioEntrada { get; set; }

[DataType(DataType.Time)]
[Display(Name = "Horário de saída")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = @"{0:HH:mm}")]
public TimeSpan? HorarioSaida { get; set; }

Switch to:

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:hh\\:mm}")]
public TimeSpan? HorarioSaida { get; set; }

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:hh\\:mm}")]
public TimeSpan? HorarioEntrada { get; set; }

About the support of these fields in Firefox, apparently Mozilla does not accept the specifications of date and time fields (sponsored by Google), so you will have to do the inclusion of Webshim in your project to have these fields also in Firefox.