How do I customize the date and time displayed on a website?

Question

I have been trying to work on the ability to customize the date and time as part of a larger project. Something like this:

<body>
  <input type="date" id="date-input" placeholder="Date">
  <input type="time" id="time-input" placeholder="Time">
  <button onclick="setDateTime()">Set Date & Time</button>
  <h1>Current Date & Time:</h1>
  <span id="datetime-span"></span>
</body>

However, I am not sure on how I can not only display the values that I enter, but also make sure that the time entered will be updated every second/minute.

My current code looks like this:

function setDateTime() {
    var dateInput = document.getElementById('date-input').value;
    var timeInput = document.getElementById('time-input').value;
    var datetimeSpan = document.getElementById('datetime-span');

    var dateTime = dateInput + ' ' + timeInput;
    datetimeSpan.textContent = dateTime;

    // Update the time every minute
    setInterval(updateDateTime, 60000);
}

function updateDateTime() {
    var dateInput = document.getElementById('date-input').value;
    var timeInput = document.getElementById('time-input').value;
    var datetimeSpan = document.getElementById('datetime-span');
    // What now?
}

UPDATE: Thanks to the help of Kiran Shahi, this problem is now solved. The Javascript is now as follows:

  var runningHour;
  var runningMinute;
  var intervalId;

function setDateTime() {
  var dateInput = document.getElementById('date-input').value;
  var timeInput = document.getElementById('time-input').value;
  var datetimeSpan = document.getElementById('datetime-span');

  runningHour = timeInput.split(":")[0];
  runningMinute = timeInput.split(":")[1];

  var dateTime = dateInput + ' ' + timeInput;
  datetimeSpan.textContent = dateTime;
  clearInterval(intervalId);
  // Update the time every second, for demo purposes
  intervalId = setInterval(updateDateTime, 1000);
}

function updateDateTime() {
  var dateInput = document.getElementById('date-input').value;
  var timeInput = document.getElementById('time-input').value;
  var datetimeSpan = document.getElementById('datetime-span');

  if (runningMinute < 59) {
    runningMinute++;
  } else {
    runningMinute = 00;
    if (runningHour < 23) {
      runningHour++;
    } else {
      runningHour = 00;
    }
  }
  var paddedHour = runningHour.toString().padStart(2, '0');
  var paddedMinute = runningMinute.toString().padStart(2, '0');

  datetimeSpan.textContent = dateInput + ' ' + paddedHour + ':' + paddedMinute;
}

thanks that was a typo, supposed to be updateDateTime – Zhou Jul 19 '23 at 08:30 — Zhou, Jul 19 '23 at 08:30

Albert Einstein · Accepted Answer · 2023-07-21T10:31:18.910

Here I have implemented a rough algorithm to update the time for every second. In your case you can change it into every minute. The basic idea here is to split the time base on : so that we get hours and minute. And increase the minute for every second/minute you want to until its 59 otherwise reset it to 00. Similarly, incase of hour increase it unit its 23 and reset to 00 if it is 23.

I hope this solution provide you rough idea for your problem.

var runningHour;
var runningMinute;
var intervalId;

function setDateTime() {
  var dateInput = document.getElementById('date-input').value;
  var timeInput = document.getElementById('time-input').value;
  var datetimeSpan = document.getElementById('datetime-span');

  runningHour = timeInput.split(":")[0];
  runningMinute = timeInput.split(":")[1];

  var dateTime = dateInput + ' ' + timeInput;
  datetimeSpan.textContent = dateTime;
  clearInterval(intervalId);
  // Update the time every second, for demo purposes
  intervalId = setInterval(updateDateTime, 1000);
}

function updateDateTime() {
  var dateInput = document.getElementById('date-input').value;
  var timeInput = document.getElementById('time-input').value;
  var datetimeSpan = document.getElementById('datetime-span');

  if (runningMinute < 59) {
    runningMinute++;
  } else {
    runningMinute = 00;
    if (runningHour < 23) {
      runningHour++;
    } else {
      runningHour = 00;
    }
  }
  var paddedHour = runningHour.toString().padStart(2, '0');
  var paddedMinute = runningMinute.toString().padStart(2, '0');

  datetimeSpan.textContent = dateInput + ' ' + paddedHour + ':' + paddedMinute;
}

<body>
  <input type="date" id="date-input" placeholder="Date">
  <input type="time" id="time-input" placeholder="Time">
  <button onclick="setDateTime()">Set Date & Time</button>
  <h1>Current Date & Time:</h1>
  <span id="datetime-span"></span>
</body>

Keep in mind if you don't clear the instance of old setInterval before creating new instance of new setInterval, it will show abnormal behaviour i.e. it create multiple instances and runs in background and trigger the callback multiple times. In this case you need to hold the instance of setInterval and clear it before you create new instance of setInterval.

Thank you very much for your help! Is there a simple way to change the displayed time from for example 23:5 to 23:05? — Zhou, Jul 19 '23 at 09:09
@Zhou yes, you can check the length of `runningHour`/`runningMinute` with `runningMinute.length` if it is 1 then append 0 infront of it when displaying in html. — Albert Einstein, Jul 19 '23 at 09:11
Thanks. After some testing there seems to be a slight problem. The first time, when i click the button, everything is fine, however, if I click "Set Date & Time" again, then not only does +1 every second, but instead +2. The more I click, the quicker the timer becomes. — Zhou, Jul 19 '23 at 09:49
@Zhou because if you click the button multiple time then your `setInterval` executes multiple times i.e. it create multiple instances and runs in background. In this case you need to hold the instance of `setInterval` and clear it before you create new instance of `setInterval`. — Albert Einstein, Jul 19 '23 at 09:53

score 0 · Answer 2 · answered Jul 19 '23 at 20:00

To customize the date input to show the user, you can use the following code as a template:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Styling Input Date</title>
    <!--Google Font-->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <input type="date">
</body>
</html>

css:

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
input[type="date"]{
    background-color: #0080ff;
    padding: 15px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-family: "Roboto Mono",monospace;
    color: #ffffff;
    font-size: 18px;
    border: none;
    outline: none;
    border-radius: 5px;
}
::-webkit-calendar-picker-indicator{
    background-color: #ffffff;
    padding: 5px;
    cursor: pointer;
    border-radius: 3px;
}

I hope it helped you:)

Thank you for your help. However, this question was not about how to input, but rather about how to set your input as a time that is constantly changing (every second). But thank you anyway. — Zhou, Jul 21 '23 at 06:10

How do I customize the date and time displayed on a website?

2 Answers2