How to format Date, Time, Number in ASP.NET Core 2.0, RAZOR Tag Helpers

Question

I'm facing problems trying to format DateTime and Numbers in ASP.NET MVC Core 2.0 App using Razor Tag Helpers.

Following the good practices I would like to specify data format at the data model related to the form view.

My Model

public class OrderFormModel
{
    public bool IsEdit { get; set; }

    [Display(Name = "Order Time: ")]
    public DateTime ORDER_LOCAL_TIME { get; set; }

    [Display(Name = "Order Qty (K): ")]
    public int QUANTITY_K { get; set; }

The view:

        <div class="form-group col-md-9">
            <label asp-for="ORDER_LOCAL_TIME"></label>
            <input asp-for="ORDER_LOCAL_TIME" class="form-control" />
            <span asp-validation-for="ORDER_LOCAL_TIME" class="text-danger"></span>
        </div>
        <div class="form-group col-md-6">
            <label asp-for="QUANTITY_K"></label>
            <input asp-for="QUANTITY_K" min="1" class="form-control" style="text-align:right" />
            <span asp-validation-for="QUANTITY_K" class="text-danger"></span>
        </div>

The desired formats are

12/12/2017 12:23 (can be separated in to two fields as workaround)

1 000.145

I've been trying a lot of options but none of them works. For the number input, I would like when the user enters the value and leaves the input, the format to be applied.

I've been trying:

 [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy hh:mm}")]
  (not applied at all)

 [DisplayFormat(DataFormatString = "{0:N3}")]
  (not applied at all)

 [DataType(DataType.Time)]
  (applied but seconds, milliseconds and AM/PM present)

 [DataType(DataType.Date)]
  (works for date only field)

Your help is highly appreciated. Thanks.

UPDATED

As Stephen Muecke noted [DisplayFormat] applies the format when the page is first rendered. Agree, thanks. I have initial values for ORDER_LOCAL_TIME and QUANTITY_K properties. DateTime = now for ORDER_LOCAL_TIME and 1000 for QUANTITY_K.

So for example on New Order Action I would like Form View to show formatted initial values for Date with Time (mm:ss only) and Quantity (with thousand separators). The problem is I can't achieve that.

As Stephen Muecke notices format applied when your in the browser and the user edits a value and leaves the input is another story. If I use Java Script function connected to the OnChange event of the QUANTITY input, I can format and try to return formatted number as text to the input. But in this case: << jquery.js:7592 The specified value "3 000" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)? >>

Solution 1

I'm working in ASP.NET Core and have found a solution to this problem that puzzled me off and on for a week (and was not resolved to my satisfaction in any of the forums I found here or elsewhere.)

I did not want to edit the property in the model or in the controller because I wanted the whole date (with timestamp) to be stored in the database.

The solution was to pass @item.CreatedDate.Date.ToShortDateString() in the view, now my desired format MM/DD/YYYY on the page where I want limited date information displayed. ("CreatedDate" is my property). Hope that clears up some headaches.

Solution 2

.cshtml:

<input type="text" asp-for="Model.StartDate" class="form-control" data-provide="datepicker" data-date-autoclose="true" data-date-format="yyyy-mm-dd">

.cs:

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