Html – Set min value for End time using datetime-local input type depending on Start Time

// Reference the <form>
const ui = document.forms.schedule;
// Reference all form fields under <form> (ex. all <input>s)
const io = ui.elements;
// Collect both <input name="dateTime"> into an array
const dT = Array.from(io.dateTime);

/**
 * https://stackoverflow.com/a/61082536/2813224
 *
 * Convert a given Date object/string into a Date string that is
 * formatted to match values from <input type="datetime-local">,
 * YYYY-MM-DDTHH:mm.
 * @param {object|string} date - A Date object or valid string
 * @return {string}              A string formatted as: 
 *                               YYYY-MM-DDTHH:mm
 */
function getLocaleDT(date) {
  // If nothing is passed, then create a Date object for now.
  let d = !date ? new Date() : new Date(date);
  /*
    Get the diff between minutes (0 - 59) and TZ
    Set the diff as the current minutes in local TZ
  */
  d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
  // Return YYYY-MM-DDTHH:mm string
  return d.toISOString().slice(0, 16);
}

/**
 * When event handler is triggered it will adjust 
 * <input id="deadLine"> value to the value of <input id="startDay"> 
 * if <input id="deadLine"> value is less than <input id="startDay">
 * @param {object} e - Event object
 */
function dateTimeRange(e) {
  // Get the value of <input id="startDay"> (aka dT[0])
  let min = new Date(dT[0].value);
  // Get the value of <input id="deadLine"> (aka dT[1])
  let max = new Date(dT[1].value);

  // If the user unfocused from an <input> having the [name="dateTime"]...
  if (e.target.name === "dateTime") {
    // if d[0].value is greater tahn d[1].value...
    if (min > max) {
      // adjust the value of dT[1] to match the value of dT[0]
      max = min;
      dT[1].value = getLocaleDT(min);
    }
  }
}

/**
 * https://stackoverflow.com/a/1214753/2813224
 *
 * This eventListener is triggered when the DOM has finished loading.
 * It will get the current datetime and set d[0].value with it.
 * Then it sets d[1].value with d[0].value + 30 min.
 * @param {object} e - Event object
 */
document.addEventListener("DOMContentLoaded", function(e) {
  let now = getLocaleDT();
  dT[0].value = now;
  now = new Date(now);
  const halfHour = new Date(now.getTime() + 30 * 60000);
  dT[1].value = getLocaleDT(halfHour);
});

// When the user unfocuses on <form>,  dateTimeRange(e) will be called.
ui.addEventListener("change", dateTimeRange);

:root {
  font: 3ch/1.2 "Segoe UI";
}

label {
  display: block;
  margin: 0.25rem 0;
}
/**
 * Inset shadow-box
 * https://codepen.io/vanss472/pen/QvGMaw?editors=0100
 */
input {
  display: block;
  width: 12rem;
  margin: 0.25rem 0;
  padding: 0.6rem 0.1rem 0.7rem;
  border: 1px solid #d1d1d1;
  outline: none;
  font: inherit;
  color: #525865;
  box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.2);
  transition: 0.2s ease-out;
}

input:hover {
  box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);
}

input:focus {
  border: 1px solid #B8B6B6;
  color: #4b515d;
  box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}

<!-- 
  Assign the same [name] to both <input>s so they can be easily
  collected into an array
    ex. <input name="dateTime">
-->
<form id="schedule">
  <label for="startDay">Start Date</label>
  <input id="startDay" name="dateTime" type="datetime-local">
  <label for="deadLine">End Date</label>
  <input id="deadLine" name="dateTime" type="datetime-local">
</form>