Working with time in JS

by Kirubel Girma

HTML

<form>
  <input type="time" id="inpt_start_time" />
  <input type="date" id="inpt_start_date" />
  <button type="submit" id="time_submit">Submit</button>
</form>

JavaScript

var now = new Date();

var startDate
var startTime

const inputStartTime = document.getElementById('inpt_start_time');
const inputStartDate = document.getElementById('inpt_start_date');
const inputSubmit = document.getElementById('time_submit');

window.addEventListener('load', () => {
  // Format the hours and minutes with padStart to ensure two digits (e.g., 09:05)
  var hours = now.getHours().toString().padStart(2, '0');
  var minutes = now.getMinutes().toString().padStart(2, '0');
  var year = now.getFullYear();
  var month = (now.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-based, so add 1
  var day = now.getDate().toString().padStart(2, '0'); // Correctly get the day of the month

	startDate = `${year}-${month}-${day}`
  startTime = `${hours}:${minutes}`
  
  inputStartTime.value = `${hours}:${minutes}`;
  inputStartDate.value = `${year}-${month}-${day}`;
});

function listAllTimezones() {
  return Intl.supportedValuesOf('timeZone');
}

function getSystemTimezone() {
  return Intl.DateTimeFormat().resolvedOptions().timeZone;
}

inputStartDate.addEventListener('change', (event) => {
  var thisdate = new Date()
  var year = thisdate.getFullYear();
  var month = (thisdate.getMonth() + 1).toString().padStart(2, '0');
  var day = thisdate.getDate().toString().padStart(2, '0');
  startDate = `${year}-${month}-${day}`;
});

inputStartTime.addEventListener('change', (event) => {
  const valuetime = new Date(event.target.value);
  startTime = event.target.value
});

inputSubmit.addEventListener('click', (event) => {
  event.preventDefault();
  console.log(startDate, startTime, getSystemTimezone())
});