How to close time input after picking the time?-CodePudding

<label  for="taskTime">Enter Finish Time:</label>
<input  type="time" id="taskTime" required />

After choosing the time the time picker remains open, how close it after choosing the time?

CodePudding user response：

First of all the date picker will be different with respect to the OS and Browser. Closing the time picker is not a good practise.

This Will solve the problem partially

let timePicker = document.getElementById("taskTime")

timePicker.addEventListener('input', updateValue);

function updateValue() {
  timePicker.type = 'text';
  timePicker.type = 'time';
}

<label  for="time">Enter Finish Time:</label>
<input  type="time" id="taskTime" required />

CodePudding user response：

you can add HTMLElement.blur() method on input event listener to remove the focus on input field.

let taskTime = document.querySelector('#taskTime');
taskTime.addEventListener('input', (e) => {
  taskTime.blur();
});

<label  for="taskTime">Enter Finish Time:</label>
<input  type="time" id="taskTime" required />