Login/Register
HTML time input type - how to let select time menu view when clicking anywhere not only clock icon click
Asked Answered
htmlinputtime
C

4

9

I working on the time input type in HTML, my problem is when I click on the small clock icon on the right side of the input, the selectable time menu is viewed but I need to show it when I click anywhere on input. enter image description here

I found this question but this does not solve my problem because it's about Timepacker, not HTML only.

show timepicker on click whole input type time HTML5 field not only on little clock icon

HTML :

  <label for="first" class="">{{__('From Hour')}}</label>
   <input type="time" class="form-control input-md"name="" id="from_hour" value="">
Cosine answered 29/11, 2020 at 8:0 Comment(3)
did you manage to solve this issue? I have the same problem – Ethmoid
@JSN not yet i still waiting . – Cosine
I guess, I will use jquery datetime picker then. haha – Ethmoid
E
8

For me, adding onfocus="this.showPicker()" attribute on the time input solved the problem.

source: https://mcmap.net/q/1173876/-how-to-show-calendar-popup-when-input-type-quot-date-quot-is-on-focus

Eisenstein answered 24/8, 2022 at 6:28 Comment(0)
C
4

This style works fine in my case:

input[type="time"] {
    position: relative;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    display: block;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: transparent;
}
Clamorous answered 18/1, 2023 at 7:21 Comment(0)
A
1

Credit to @StepPen-codes at How To Open HTML Date Picker Dialog On Click Anywhere Inside Input?

You can use CSS to do the trick. It works but in my case, the calendar icon disappears. I try to bring it back but the position isn't nice.

input#session-date::-webkit-calendar-picker-indicator{
  display:block;
  top:0;
  left:0;
  background: #0000;
  position:absolute;
  transform: scale(12)
}
About answered 15/11, 2021 at 10:16 Comment(0)
B
1

.inputfield{
          position: relative;
          width: 100px;
      }
      input {
        border: 1px solid #bfc9e2;
        border-radius: 5px;
        height: 28px;
        margin-bottom: 7px;
        padding: 5px;
        position: relative;
        z-index: 2;
        background: transparent;
        width: 100px;
      }
      input[type=time]::-webkit-calendar-picker-indicator {
          bottom: 0;
          color: transparent;
          cursor: pointer;
          height: auto;
          left: 0;
          opacity: 0;
          position: absolute;
          right: 0;
          top: 0;
          width: 100%
      }
      .clock-img {
          position: absolute;
          right: 0px;
          top: 10px;
          z-index: 0;
      }
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<h1>Sample Test</h1>

<form>
    
  <div class="inputfield">
    <input type="time" id="appt" name="appt">
    <span class="clock-img"><i class="fa fa-clock-o"></i></span>
  </div>
</form>

</body>
</html>
Badman answered 27/10, 2023 at 14:51 Comment(2)
This should works fine. – Badman
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Optometry

© 2022 - 2024 — McMap. All rights reserved.