0

I want to display a date in German date format (dd.MM.yyyy) from the model in an MVC app and provide the user a datepicker. I've gone throug a lot of the questions that have already been answered on this topic, but still can't get it to work. I tried it in Firefox and Edge, with the same results for each step.

Step 1:

Model: 

private DateTime? inbetriebnahmedatum;

public DateTime? Inbetriebnahmedatum
{               
    get { return inbetriebnahmedatum; }
    set { inbetriebnahmedatum = value; OnPropertyChanged(new PropertyChangedEventArgs("Inbetriebnahmedatum")); }
}

View:

@Html.EditorFor(model => model.Inbetriebnahmedatum, new { htmlAttributes = new { @class = "form-control", placeholder = "Datum eingeben" } })

Result: No Datepicker, Time is displayed, Validation error enter image description here

Step 2: Added DataType

Model:

private DateTime? inbetriebnahmedatum;

[DataType(DataType.Date)]
public DateTime? Inbetriebnahmedatum
{
    get { return inbetriebnahmedatum; }
    set { inbetriebnahmedatum = value; OnPropertyChanged(new PropertyChangedEventArgs("Inbetriebnahmedatum")); }
}

View: unchanged

Result: Value not loaded. enter image description here

Step 3: DisplayFormat added, Datatype removed

Model:

private DateTime? inbetriebnahmedatum;

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd.MM.yyyy}")]
public DateTime? Inbetriebnahmedatum
{
    get { return inbetriebnahmedatum; }
    set { inbetriebnahmedatum = value; OnPropertyChanged(new PropertyChangedEventArgs("Inbetriebnahmedatum")); }
}

View: unchanged

Result: Date displayed, but no datepicker and Validation Error enter image description here

Step 4: Addedd ui Culture to Web.config

Web.config

<globalization uiCulture="de-DE" culture="de-DE" />

Result: Same enter image description here

Step 5: Added Datatype again

Model: 

private DateTime? inbetriebnahmedatum;

[DataType(DataType.Date)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd.MM.yyyy}")]
public DateTime? Inbetriebnahmedatum
{
    get { return inbetriebnahmedatum; }
    set { inbetriebnahmedatum = value; OnPropertyChanged(new PropertyChangedEventArgs("Inbetriebnahmedatum")); }
}

Result: Value not loaded, datepicker shows enter image description here

Mister 832
  • 1,177
  • 1
  • 15
  • 34
  • 1
    The `DataFormatString` must be `yyyy-MM-dd` (ISO format) when generating the browsers HTML-5 datepicker, and then it will be displayed in the users culture which is the whole point of using it. –  Dec 31 '17 at 09:21
  • Use a jQuery datepicker (e.g. jQueryUI) but then you will also need to reconfigure the `$.validator` for client side validation. –  Dec 31 '17 at 09:23
  • @StephenMuecke: You are right, now it works - Thank you. – Mister 832 Dec 31 '17 at 09:28

1 Answers1

0

i'm not sure but u can try this try enter as like >> : 01/01/2018

or

[DisplayFormat(DataFormatString = "{0:MMM dd, yyyy}")]

or 

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

Show Time and data using Data annotation

Mahmod Abu Jehad
  • 167
  • 2
  • 14