MVC EditorFor Timespan is removing the seconds

Question

The editor generated for my Timespan only includes hours and minutes. I would like it to be standard, i.e. hh:mm:ss.

I would have thought the default would be that, which I've tried. I've also tried

    [DisplayName("Start Time")]
    [DisplayFormat(DataFormatString = "{0:hh\\:mm\\:ss}", ApplyFormatInEditMode = true)]
    [DataType(DataType.Time)]
    public TimeSpan? StartTime { get; set; }

The view

<div class="form-group">
    @Html.EditorFor(model => model.SearchCriteria.StartTime, new {htmlAttributes = new {@class = "form-control"}})
    @Html.ValidationMessageFor(model => model.SearchCriteria.StartTime, "", new {@class = "text-danger"})
</div>

Answer 1

You can use inputmask to get the masking/formatting effect:

1. Add class to your control you want to format e.g. time-mask

@Html.EditorFor(model => model.SearchCriteria.StartTime, new {htmlAttributes = new {@class = "form-control time-mask"}})

2. Add reference to jquery.inputmask.bundle package

3. Use the inputmask function.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('.time-mask').inputmask("hh:mm:ss", {
            placeholder: "hh:mm:ss",
            showMaskOnHover: false
        });
    });
</script>

Just keep in mind that TimeSpan not designed to represent time of day, but it is for showing a duration of period so it is normal to have TimeSpan value in negative or longer than 24 hours.

Update:

The behavior is normal since [DataType(DataType.Time)] annotation will add type="time" to the input element in your HTML which is a HTML5 attribute used by some of the browsers like Chrome but not FireFox for example. If you want to use the annotation then you need to add an attribute step="1" to the EditorFor so your code will be:

@Html.EditorFor(model => model.StartTime, new { htmlAttributes = new { @class = "form-control", @step = "1" } }).

Note this will work on Chrome but not on FireFox, IE 11 and earlier versions.That's why I suggested the other solution.