Problem with inputfield DateTime and TimeSpan

Question

I'm having trouble with some ASP/C# inputfields. Here is a screencapture of what I have:

It is a inputfield for movies in a cinema. StartAt is the startdate of a timetable, EndAt is the enddate of the timetable and the Time represents the daily time within the two dates that the movie is playing daily.

Problem is I'm European and normal pattern would be dd-mm-yyyy for us. I cannot get that done. The bigger problem is the Timespan. That should be HH:mm (24h clock) and not HH:mm:ss.

Here is my View-code:

<div class="form-group">
    <label asp-for="StartAt" class="control-label"></label>
    <input asp-for="StartAt" class="form-control" />
    <span asp-validation-for="StartAt" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="EndAt" class="control-label"></label>
    <input asp-for="EndAt" class="form-control" />
    <span asp-validation-for="EndAt" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="Time" class="control-label"></label>
    <input asp-for="Time" class="form-control" />
    <span asp-validation-for="Time" class="text-danger"></span>
</div>

And here is my model:

public class MovieRuntime
{
   public int Id { get; set; }
   public int MovieId { get; set; }
   public int HallId { get; set; }

   [DataType(DataType.Date)]
   [Column(TypeName = "Date")]
   public DateTime StartAt { get; set; }

   DataType(DataType.Date)]
   [Column(TypeName = "Date")]
   public DateTime EndAt { get; set; }

   [DataType(DataType.Time)]
   [Column(TypeName = "Time")]
   public TimeSpan Time { get; set; }

   [ForeignKey("MovieId")] 
   public virtual Movie Movie { get; set; } = null!;
   [ForeignKey("HallId")] 
   public virtual Hall Hall { get; set; } = null!;
}

I tried to use DisplayFormat in the model, but this didn't help:

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

What do I miss here?

Nathelol · Answer 1 · 2022-04-04T09:33:29.250

1

You can use asp-formatting to specify the format of the date and time.

asp-format="{0:dd.MM.yyyy}"

<div class="form-group">
    <label asp-for="StartAt" class="control-label"></label>
    <input asp-for="StartAt" asp-format="{0:dd.MM.yyyy}" type="date" class="form-control" />
    <span asp-validation-for="StartAt" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="EndAt" class="control-label"></label>
    <input asp-for="EndAt" asp-format="{0:dd.MM.yyyy}" type="date" class="form-control" />
    <span asp-validation-for="EndAt" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="Time" class="control-label"></label>
    <input asp-for="Time" asp-format="{0:HH:mm}" type="time" class="form-control" />
    <span asp-validation-for="Time" class="text-danger"></span>
</div>

edited Apr 04 '22 at 09:33

answered Apr 04 '22 at 08:59

Nathelol

577
7
25

Well, your snippet doesn't work, still: --:-- --, so with seconds. Do I need to add something to the Model? – iFritsWester Apr 04 '22 at 09:02
ah you should use asp-format="{0:dd.MM.yyyy}" and asp-format="{0:HH:mm}" attribute on the inputs as this is an inputfield. – Nathelol Apr 04 '22 at 09:30
Wish it was that easy, but no... Not working. – iFritsWester Apr 04 '22 at 09:35
Is the model being used correctly in the view? should it be MovieRuntime.StartAt etc instead of just StartAt? Looks like you've done everything regards formatting so I can't see why this wouldn't work now. – Nathelol Apr 04 '22 at 09:48
No need to add MovieRuntime in front of it. Else it would already give errors. It is just the pattern that won't work. I'm using Firefox. I'll try it with Chrome.... But i hate Google... :P – iFritsWester Apr 04 '22 at 10:00
It is working in Chrome! But how do I get it working in FireFox – iFritsWester Apr 04 '22 at 10:11
It's not cached in Firefox is it!? (I'm using Firefox and it looks good) – Nathelol Apr 04 '22 at 10:12
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/243577/discussion-between-ifritswester-and-nathelol). – iFritsWester Apr 04 '22 at 10:16

score 1 · Answer 2 · answered Apr 04 '22 at 11:06

1

Html date input isn't offically possible to format change. Pure element always show based on browser culture.

You should use 3rd library (like bootstrap datepicker, jquery datepicker) or you can hack with css, js (ex : https://stackoverflow.com/a/31162426/14671235)

answered Apr 04 '22 at 11:06

Okan Karadag

2,542
1
11
23

That's strange because browser culture should be dd/mm/yyyy here, but still I have MM/dd/yyyy. – iFritsWester Apr 04 '22 at 11:13
1

@iFritsWester I'm turkish user. when language of chrome set english, it shown MM/dd/yyyy instead dd/mm/yyyy. the problem with this browser. Even if you fix it, another user will definitely have a different problem. – Okan Karadag Apr 04 '22 at 11:48
Thanks Okan! I'm Dutch but my settings are English. That's why, I think! Changed it. Check my own answer above! – iFritsWester Apr 04 '22 at 12:07

iFritsWester · Answer 3 · 2022-04-04T12:11:35.043

I made a workaround for the biggest problem, the TimeSpan. I changed the input-field to a textbox:

<input type="text" class="form-control" placeholder="i.e 12:00" name="time" onchange="validateHhMm(this)" required=""/>

I added a javascript regex-checker which changes the bg-color of the textfield red and disables the button when it's not the right expression:

<script>
function validateHhMm(inputField) 
{
    var isValid = /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/.test(inputField.value);

    if (isValid) {
      inputField.style.backgroundColor = '#bfa';
      document.getElementById('addButton').disabled = false;
      
    } else {
      inputField.style.backgroundColor = '#fba';
      document.getElementById('addButton').disabled = true;  
    }
    return isValid;
}
</script>

Output is now like this:

For the Pattern problem, the problem was that my browser was on US-settings. That is why I got the US pattern. I changed it to Dutch and this was the output:

Problem with inputfield DateTime and TimeSpan

3 Answers3