Display DateTime value in dd/mm/yyyy format in Asp.NET MVC

Question

Is it possible to display a DateTime value in dd/mm/yyyy format with the help of HTML Helper methods in Asp.NET MVC? I tried to do this by using some formats in @Html.LabelFor and adding some annotations to the related property like below but it does not make any sense. Any help to solve this problem would be appreciated.

Model:

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public Nullable<System.DateTime> RegistrationDate { get; set; }

score 87 · Answer 1 · edited Jun 06 '18 at 13:25

87

All you have to do is apply the format you want in the html helper call, ie.

@Html.TextBoxFor(m => m.RegistrationDate, "{0:dd/MM/yyyy}")

You don't need to provide the date format in the model class.

edited Jun 06 '18 at 13:25

dnickless

10,733
1
19
34

answered Aug 18 '13 at 16:05

Mahajan344

2,492
6
39
90

7

And if you are concerned with the regional formatting you could try `{0:d}` – frictionlesspulley Oct 17 '13 at 17:13
1

this will do noting, it's google chrome it self if you run the page in IE windows, you will not see date picker – SAR Dec 24 '16 at 05:39
It will be required to format on every page! Any global control will be appreciable! – Khalid Bin Sarower Feb 05 '23 at 09:23

score 65 · Accepted Answer · edited Aug 10 '17 at 03:58

65

After few hours of searching, I just solved this issue with a few lines of code

Your model

      [Required(ErrorMessage = "Enter the issued date.")]
      [DataType(DataType.Date)]
      public DateTime IssueDate { get; set; }

Razor Page

     @Html.TextBoxFor(model => model.IssueDate)
     @Html.ValidationMessageFor(model => model.IssueDate)

Jquery DatePicker

<script type="text/javascript">
    $(document).ready(function () {
        $('#IssueDate').datepicker({
            dateFormat: "dd/mm/yy",
            showStatus: true,
            showWeeks: true,
            currentText: 'Now',
            autoSize: true,
            gotoCurrent: true,
            showAnim: 'blind',
            highlightWeek: true
        });
    });
</script>

Webconfig File

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

Now your text-box will accept "dd/MM/yyyy" format.

edited Aug 10 '17 at 03:58

Krizzy

77
1
3
6

answered Sep 01 '13 at 12:54

iYogi

674
5
4

1

thanks mate, i was doing everything except the web.config thing but when i added your web.config line in mine, it worked perfect – Ehsan Sajjad Jan 08 '14 at 10:58
2

I tryed all that you said, but it keeps failing in one point. I'm guessing that you don't have unobtrusive jquery activated, because if you have, it throws validation errors saying that the field is not a valid date, (try a date like 31/01/2014, bcb january 31.) Try it and tell me if you have same problem. Thnks – Yogurtu Dec 28 '14 at 02:48
I just added the WebConfig section it's enough to get round it - MVC5 Helpers allow you to specify a Format for the date so visible display is not an issue - I was getting stuck with a hidden field that had an AU/GB date in it – Rob Jul 14 '15 at 06:19
tried but not working,Model was set, rebuild, script was included in create view, and the view was as(( @Html.TextBoxFor(model => model.startDate, new { htmlAttributes = new { @class = "datepicker" } }))).... still in IE8 to IE 11 not working – SAR Dec 24 '16 at 05:27
This answer worked for me but dateFormat wasn't working, finally I realized I'm using Bootstrap datepicker and it's properties are different, [here](https://uxsolutions.github.io/bootstrap-datepicker/) is details. – Furkan Ekinci May 31 '19 at 11:45

score 12 · Answer 3 · answered Dec 23 '14 at 13:25

12

I know this is an older question, but for reference, a really simple way for formatting dates without any data annotations or any other settings is as follows:

@Html.TextBoxFor(m => m.StartDate, new { @Value = Model.StartDate.ToString("dd-MMM-yyyy") })

The above format can of course be changed to whatever.

answered Dec 23 '14 at 13:25

Dav.id

2,757
3
45
57

How do you solve the submitted format when server is expecting datetime and you submit some formatted string ? – Muflix Apr 25 '18 at 12:07
@David This save my entire week :) – Ninja Jul 26 '19 at 14:21
1

@Muflix You need to set StartDate type as DateTime, mvc will automatically convert it into DateTime – Ninja Jul 26 '19 at 14:22

Steven · Answer 4 · 2018-06-05T08:35:01.173

10

Since the question was "display" :

@Html.ValueFor(model => model.RegistrationDate, "{0:dd/MM/yyyy}")

edited Jun 05 '18 at 08:35

answered Mar 13 '17 at 21:23

Steven

1,444
17
23

score 6 · Answer 5 · answered Apr 14 '17 at 13:39

6

Or just use this in your View(Razor page)

@item.ResgistrationhaseDate.ToString(string.Format("dd/MM/yyyy"))

I recommend that don't add date format in your model class

answered Apr 14 '17 at 13:39

Ayman

580
9
27

underrated solution – Eduard Oct 01 '17 at 12:29

Jehad87 · Answer 6 · 2016-02-23T09:25:06.837

3

You need to use html helper, and you don't need to provide date format in model class. e.x :

@Html.TextBoxFor(m => m.ResgistrationhaseDate, "{0:dd/MM/yyyy}")

edited Feb 23 '16 at 09:25

answered Feb 21 '16 at 21:02

Jehad87

49
3

score 2 · Answer 7 · answered Sep 07 '19 at 16:33

It might be too late to answer this in 2019. but I tried all the answers and none worked for me. So I solved it simply this way:

@Html.EditorFor(m => m.SellDateForInstallment, "{0:dd/MM/yyyy}", 
               new {htmlAttributes = new { @class = "form-control", @type = "date" } })

EditorFor is what worked for me.

Note that SellDateForInstallment is a Nullable datetime object.

public DateTime? SellDateForInstallment { get; set; } // Model property

Freddy Fernandez · Answer 8 · 2021-04-04T04:48:26.867

0

I made a global configuration in "Web.config" inside etiquet system web:

globalization uiCulture="en" culture="en-US

In CsHtml: @Html.TextBoxFor(model => model.fechaConfirmacion, new { @type = "date", @Value = Model.fechaConfirmacion.ToString("MM/dd/yyyy hh:mm:sszzz") })

edited Apr 04 '21 at 04:48

answered Apr 04 '21 at 04:36

Freddy Fernandez

1
1

Display DateTime value in dd/mm/yyyy format in Asp.NET MVC

8 Answers8

Linked

Related