Time Picker Input With An Animated Clock

Preview:

Description:

A creative time picker input with an animated analog clock that automatically updates with the value you typed.

How to use it:

1. Create a time input for the time picker.

<input type="time" name="time" id="time" />

2. The necessary CSS styles for the time picker.

html {
  --color: #945;
  --bgColor: #d89;
  --size: 2rem;
  --border: calc(var(--size) * 0.125);
  --borderRadius: calc(var(--size) * 0.5);
  --labelSize: calc(var(--size) * 0.75);
  --margin: calc(var(--size) * 0.25);
  --marginLeft: calc(var(--size) + calc(var(--size) * 0.5));
}
input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='18.5' fill='none' stroke='%23222' stroke-width='3' /><path d='M20,4 20,8 M4,20 8,20 M36,20 32,20 M20,36 20,32' stroke='%23bbb' stroke-width='1' /><circle cx='20' cy='20' r='2' fill='%23222' stroke='%23222' stroke-width='2' /></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M18.5,24.5 19.5,4 20.5,4 21.5,24.5 Z' fill='%23222' style='transform:rotate(120deg); transform-origin: 50% 50%;' /></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M18.5,24.5 19.5,8.5 20.5,8.5 21.5,24.5 Z' style='transform:rotate(20deg); transform-origin: 50% 50%;' /></svg>");
  background-position: var(--margin) 50%;
  background-repeat: no-repeat;
  background-size: var(--size) var(--size);
  border: var(--border) solid var(--color);
  border-radius: var(--borderRadius);
  color: #222;
  font-size: var(--size);
  padding: var(--margin) var(--margin) var(--margin) var(--marginLeft);
  transition: backgroundImage 0.25s;
}

3. The main JavaScript to activate the time picker.

document.querySelector("#time").addEventListener("input", function(e) {
  const reTime = /^([0-1][0-9]|2[0-3]):[0-5][0-9]$/;
  const time = this.value;
  if (reTime.exec(time)) {
    const minute = Number(time.substring(3,5));
    const hour = Number(time.substring(0,2)) % 12 + (minute / 60);
    this.style.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='18.5' fill='none' stroke='%23222' stroke-width='3' /><path d='M20,4 20,8 M4,20 8,20 M36,20 32,20 M20,36 20,32' stroke='%23bbb' stroke-width='1' /><circle cx='20' cy='20' r='2' fill='%23222' stroke='%23222' stroke-width='2' /></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M18.5,24.5 19.5,4 20.5,4 21.5,24.5 Z' fill='%23222' style='transform:rotate(${360 * minute / 60}deg); transform-origin: 50% 50%;' /></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M18.5,24.5 19.5,8.5 20.5,8.5 21.5,24.5 Z' style='transform:rotate(${360 * hour / 12}deg); transform-origin: 50% 50%;' /></svg>")`;
  }
});