My detail view doesn't show the date even though still have the value on display in dev tool

Viewed 31

'Update' Everything work fine now but i have encounter another problem Now the date box display fine but it's not going with the right format that I want which is (dd/MM/yyyy) It's change the format into (MM/dd/yyyy)

I just have encounter a problem with my detail view in my project.

Other things work fine, but the date input box doesn't show the date input but when I check on the dev tool, it still have the input value.

I appreciate every answer to my question.

This is my detail view:

 <div id="Search" class="row d-flex justify-content-around " style="box-sizing: border-box; border:5px solid#F5F5F5">
 <div class="col-2 d-flex flex-column">
     <label asp-for="brandname">Hãng*</label>
     <input asp-for="brandname" class="form-control plaintext" readonly/>
 </div>
 <div class="col-2 d-flex flex-column">
     <label asp-for="program">Tên chương trình*</label>
     <input asp-for="program" class="form-control plaintext" readonly/>
 </div>
 <div class="col-2 d-flex flex-column">
     <label asp-for="timestart">Ngày bắt đầu*</label>
     <input asp-for="timestart" class="form-control " readonly  />
 </div>
 <div class="col-2 d-flex flex-column">
     <label asp-for="timeend">Ngày kết thúc*</label>
     <input asp-for="timeend" class="form-control " readonly />
 </div>
 <div class="col-2 d-flex flex-column">
     <label asp-for="currency">Đơn vị tiền tệ</label>
     <input asp-for="currency" class="form-control plaintext" readonly/>
 </div>

 <table id="tableh" class="cell-border hover" style="width:100%">
     <thead>
         <tr>
             <th>Loại sản phẩm</th>
             <th>Điều kiện</th>
             <th>Rebate(%)</th>
             <th>Note</th>
         </tr>
     </thead>
     <tbody>
         @for(int i = 0; i < Model.Products.Count; i++)
         {
             <tr>
                 <td>
                 @Html.EditorFor(x => x.Products[i].productname, new{htmlAtributes = new{ @class="form-control"}})
                 </td>
                 <td>
                 @Html.EditorFor(x => x.Products[i].condition, new{htmlAtributes = new{ @class="form-control"}})
                 </td>
                 <td>
                 @Html.EditorFor(x => x.Products[i].rebate, new{htmlAtributes = new{ @class="form-control"}})
                 </td>
                 <td>
                 @Html.EditorFor(x => x.Products[i].note, new{htmlAtributes = new{ @class="form-control"}})
                 </td>  
             </tr>
         }
         </tbody>
     </table>
 </div>

And here is my model I use DateTime but already convert it to DateOnly

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System;

namespace WebApplication4.Models
{
    public class Brand
   {
    [Key]
    public int brand_id { get; set; }
    [Required(ErrorMessage = "Nhập thiếu kìa fen.")]
    public string brandname { get; set; } = default!;
    [Required(ErrorMessage = "Nhập thiếu kìa fen.")]
    public string program { get; set; } = default!;
    [Required(ErrorMessage = "Nhập thiếu kìa fen.")]
    public string currency { get; set; } = default!;
    public string note { get; set; } = default!;
    [Required(ErrorMessage = "Nhập thiếu kìa fen.")]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", 
    ApplyFormatInEditMode = true)]
    public DateTime timestart { get; set; } 
    [Required(ErrorMessage = "Nhập thiếu kìa fen.")]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", 
    ApplyFormatInEditMode = true)]
    public DateTime timeend { get; set; } 

    public virtual List<Product> Products { get; set; } = new 
    List<Product>();
     }
   }
2 Answers

Try to add type="text" to the input:

<div class="col-2 d-flex flex-column">
     <label asp-for="timestart">Ngày bắt đầu*</label>
     <input type="text" asp-for="timestart" class="form-control " readonly  />
 </div>
 <div class="col-2 d-flex flex-column">
     <label asp-for="timeend">Ngày kết thúc*</label>
     <input type="text" asp-for="timeend" class="form-control " readonly />
 </div>

result:

enter image description here

In your model try replacing

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

with

[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}"]

Result

Related