How do I display the current time in an input <input type="time"> and hide its picker icon while working with another input <input type="date"> and not affect it using JavaScript?
Thank you all.
Here is how you do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="time" class="time">
<input type="date" class="date">
<script>
var date = new Date();
// This will set the current date and time in both the inputs
var currentDate = date.toISOString().substring(0 , 10);
var currentTime = date.toISOString().substring(11 , 16);
document.querySelector('.date').value = currentDate;
document.querySelector('.time').value = currentTime;
</script>
<style>
/* Hide the time picker */
input[type="time"]::-webkit-calendar-picker-indicator {
display: none;
}
/* Hide the date picker icon */
input[type="date"]::-webkit-calendar-picker-indicator{
display: none
}
</style>
</body>
</html>