Direct entry for time field in Edge browser

Question

Currently on my web form, a user in Chrome is able to directly enter a time in an HTML time field by highlighting the hour or minute portion and entering the value they want with their keyboard.

When they open the same form in Edge, they are required to scroll to find the value they want.This can get frustrating especially when they have a lot of forms to submit and they must scroll through all the minutes.

Is there a way to get the time field in Edge to act the same as it does in Chrome?

Here is the code:

<input type="time" name="departTime" id="departTime" value="<?php echo $departTime ?>">

score 0 · Accepted Answer · answered Sep 23 '19 at 16:05

0

This is a known issue with Edge, part of the broader way Edge handles Date/Time inputs.

On May 17th, 2018 Microsoft officially categorized it as one that won't be fixed:

Currently, we do not plan to release a fix for this problem. We are considering a solution for a future build.

answered Sep 23 '19 at 16:05

esqew

42,425
27
92
132

Okay, thanks. Do you know if there is a work around that developers are using for this issue? – jd0117 Sep 23 '19 at 16:24
This would generally be something that would be well-suited for a third-party library, which you could leverage to standardize the time input functionality across platforms. – esqew Sep 23 '19 at 16:25
@esqew FYI, your link to the issue is dead. – Juffy Jan 08 '20 at 04:46

score 0 · Answer 2 · answered Oct 03 '19 at 08:57

I have tested it with MS Edge and I am able to produce the issue. It can be possible that it is some kind of bug or it is Edge default behavior.

As a workaround, I suggest you could try to use the text type input to enter the value, then using JavaScript or JQuery plugin to mask the entered value.

Sample code as below:

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>

<input type="text" id="endTime" placeholder="HH:MM:SS">
<script>
    $(function () {

        $('input[id$="endTime"]').inputmask(
            "hh:mm:ss", {
                placeholder: "HH:MM:SS",
                insertMode: false,
                showMaskOnHover: false,
                hourFormat: 12
            }
        );
    });
</script>

The result like this (using Microsoft Edge browser):

Besides, since the latest version of Microsoft Edge is chromium based, the date or time type input works well in that version, you could try to use them. You could download them from here.

Direct entry for time field in Edge browser

2 Answers2

Linked