Question 87223 in ASP.NET Question posted in
The official documentation can be found here.

Problem with inputfield DateTime and TimeSpan – Asp.net

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

enter image description here

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?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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: enter image description here

    enter image description here

    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:

    enter image description here


  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search