How can show the EditorFor model value with date format

Question

I have the given model for an html page to accept the date. I am trying to format datefrom and dateto inputbox as "dd/mm/yyyy" format . At the moment , it is showed as just text format. How can I make both column to accept the data as dd/mm/yyyy.

EditDateModel
public class EditDateModel
    {
        public string FromDate { get; set; }
        public string ToDate { get; set; }
        
    }

@model EditDateModel
<table id="tblEntry" class="table table-striped">
    <thead>
        <tr>
            <th>Date From</th>
            <th>Date To</th>
        </tr>
    </thead>
    <tbody>
 <tr>
            <td>@Html.EditorFor(model => model.FromDate, new { htmlAttributes = new { @class = "form-control datepicker w-100" } })</td>
            <td>@Html.EditorFor(model => model.ToDate, new { htmlAttributes = new { @class = "form-control w-100" } })</td>
  </tr>

    </tbody>
</table>

Does this answer your question? [Specify Date format in MVC5 (dd/MM/yyyy)](https://stackoverflow.com/questions/43820926/specify-date-format-in-mvc5-dd-mm-yyyy) — Heretic Monkey, Aug 17 '21 at 16:31
Would you check my answer if it is resolve your issue. Feel free to share if you encounter any further problem — Md Farid Uddin Kiron, Aug 18 '21 at 03:53
Why are you using strings for dates? You should use `DateTime`s and the `input type=date` : https://www.mikesdotnetting.com/article/352/working-with-dates-and-times-in-razor-pages-forms — Mike Brind, Aug 18 '21 at 05:34

score 0 · Answer 1 · answered Aug 17 '21 at 16:27

0

You're on the right track, but the thing here is... asp.net mvc only responsible to generate the HTML resource, along will all the script that embeded to it. Therefore, you'll always get the text value.

To accomplish your requirement, i recommended using a third library in js that support convert actual ui interact date format. For example here, i'll use jquery and datepicker

// This is up at your HTML
<td>@Html.EditorFor(model => model.FromDate, new { htmlAttributes = new { @class = "form-control datepicker w-100" } })</td>

// And this should be on your js below that
$(document).ready(() => {
            $('.datepicker').datepicker({
                format: "dd/mm/yyyy"
            });
        });
// Please don't forget to embed the library somewhere

answered Aug 17 '21 at 16:27

Gordon Khanh Ng.

1,352
5
12

I don't think `jquery` is required whatever @Alan Pauil whats to achieve. So cannot agreed with your solution. – Md Farid Uddin Kiron Aug 18 '21 at 03:25
@MdFaridUddinKiron You're right... Jquery is definitely not requirement for what Alan want, but the datepicker library can be consider another option that would suitable for futhur customization. That's why i just recommended the lib. It's not a must actually – Gordon Khanh Ng. Aug 18 '21 at 03:47
1

If it can be managed using `asp.net core` build in functionality why use `jquery` he problem need only datetime functionality but for this he would required to use full `jquery` library which is not elegant at all. If he already used ` jquery` for client side then would you could suggest him for this. – Md Farid Uddin Kiron Aug 18 '21 at 03:53
@MdFaridUddinKiron did you spot out on his class name on the `` tag has the className `datepicker` ? That's why i assume and recommend for his requirement. I don't believe he could take that class name out of nowhere – Gordon Khanh Ng. Aug 18 '21 at 04:01
I have given him the solution keeping all his existing code. – Md Farid Uddin Kiron Aug 18 '21 at 04:43

Md Farid Uddin Kiron · Accepted Answer · 2021-08-18T03:14:29.607

You don't need to use any other library. You can do it using asp.net DataAnnotations its recomended , convenient and easy to use.

Implementation:

Made your EditDateModel like below:

public class EditDateModel
    {
        [DataType(DataType.Date, ErrorMessage = "Date only")]
        [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
        public string FromDate { get; set; }

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

Note: It would require using System.ComponentModel.DataAnnotations; reference on your package reference on the top.

Views:

<table id="tblEntry" class="table table-striped">
    <thead>
        <tr>
            <th>Date From</th>
            <th>Date To</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Html.EditorFor(model => model.FromDate, new { htmlAttributes = new { @class = "form-control datepicker w-100" } })</td>
            <td>@Html.EditorFor(model => model.ToDate, new { htmlAttributes = new { @class = "form-control datepicker w-100" } })</td>
        </tr>

    </tbody>
</table>

Note: Your FromDate was correct in format I made Todate as same format like this @class = "form-control datepicker w-100"

OutPut:

If you would like to gain some more knowledge you could refer to our official documet here. For any type date format issue you could also refer this

Hope it would resolve your problem.

score 0 · Answer 3 · answered Sep 28 '22 at 20:15

I was not able to upvote the correct answer of Mike Brind, as it is only a comment, so here I post it so that it can be upvoted.

In the class, change the type string of your properties to DateTime and add the following attribute to each:

    [BindProperty, DataType(DataType.Date)]
    public DateTime FromDate { get; set; }

    [BindProperty, DataType(DataType.Date)]
    public DateTime ToDate { get; set; }

EditorFor will then work out of the box correctly.

See also https://www.mikesdotnetting.com/article/352/working-with-dates-and-times-in-razor-pages-forms

How can show the EditorFor model value with date format

3 Answers3