Time picker with dynamic clock

index.html

<div class="inpTime">
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M7 4V7" id="hourHand"/>
    <path d="M7 2.5V7" id="minHand"/>
  </svg>
  <input type="time" value="09:41" id="timeInput">
</div>

script.js

function updateClock() {
  const timeInput = document.getElementById('timeInput').value;
  const [hours, minutes] = timeInput.split(':').map(Number);

  const hourAngle = (hours % 12) * 30 + minutes * 0.5;
  const minuteAngle = minutes * 6;

  const hourHand = document.getElementById('hourHand');
  const minHand = document.getElementById('minHand');

  hourHand.setAttribute('transform', `rotate(${hourAngle}, 7, 7)`);
  minHand.setAttribute('transform', `rotate(${minuteAngle}, 7, 7)`);
}

document.getElementById('timeInput').addEventListener('input', updateClock);

updateClock();

style.sass

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap')

body
  min-height: 100vh
  display: flex
  justify-content: center
  align-items: center
  background: #202124
  font-family: "Open Sans", sans-serif
  font-optical-sizing: auto
  font-synthesis: none
  -webkit-font-smoothing: antialiased
  text-size-adjust: 100%

*
  box-sizing: border-box

.inpTime
  position: relative
  transform: scale(1.5)
  svg
    position: absolute
    background: #eee
    z-index: 1
    top: 9px
    left: 11px
    pointer-events: none
    border-radius: 50%
    transform: translate(0,0,0)
    path
      stroke: #2D2E31
      stroke-width: 1.5
      stroke-linecap: round
      stroke-linejoin: round
  

input[type="time"]
  position: relative
  background: #2D2E31
  color: #eee
  border-radius: 8px
  appearance: none
  border: 0
  text-align: center
  padding: 6px 12px 6px 33px
  outline: none
  font-family: inherit
  font-size: 15px
  font-weight: 700
  line-height: 18px
  height: 32px
  &:focus
    box-shadow: 0 0 0 1px rgba(white,.25)
  
  
input[type="time"]::-webkit-calendar-picker-indicator
  position: absolute
  left: -4px
  background: none

time-picker-with-dynamic-clock.markdown

Time picker with dynamic clock

A Pen by Matt Daniel Brown on CodePen.

License.