Converting date and time to JavaScript date format

Question

I am trying to schedule a task by getting the date and time from the user through HTML forms.

HTML:

<input name="date" type="date" id="date">
<input name="time" type="time" id="time">

JavaScript:

let date=document.getElementById('date')
let time=document.getElementById('time')

Now I want to convert this date and time to a JavaScript date object. I want to get the output like this string below with the corresponding date and time given by the user.

Sat Dec 19 2020 11:31:21 GMT+0530 (India Standard Time)

Can someone help me through this? Thanks in advance

Answer 1

To get data from input tag trigger can be helpful. input's data is defined as value on script. So onclick event is used below:

let button1 = document.getElementById('test');
let date = document.getElementById('date');
let time = document.getElementById('time');
function testFunction(e) {
console.log(date.value, time.value)
}

<form>
<input name="date" type="date" id="date">
<input name="time" type="time" id="time">
<input name="submit" onclick="testFunction()" type="button" value="click me" id="test">
</form>

Answer 2

This is multiple questions in one.

Input type date is not supported by all browsers in use, so a fallback option is required for those cases. Where date inputs are supported, the value is returned as a string in yyyy-mm-dd format. By default, that is parsed as UTC however most want it to be treated as local so that needs to handled too.

The value from a time input is returned in hh:mm:ss format, so that also needs to be parsed to some usable form.

The trivial answer is to just join the date and time values with a "T" (producing a format of yyy-mm-ddThh:mm:ss) and leave it to the built–in parser as it should be parsed as local, but may not be (see Why does Date.parse give incorrect results?)

A more robust solution is to parse the date and time separately, then combine the values. You can use a library, but simple functions are only a couple of lines.

The following demonstrates both methods, hopefully the comments are sufficient.

// Parse yyyy-mm-dd as local
function parseISOLocal(s) {
  let [y, m, d] = s.split(/\D/);
  return new Date(y, m-1, d);
}
// Parse hh:mm:ss to ms
function parseTime(t) {
  let [h, m, s] = t.split(/\D/);
  return h*3.6e6 + m*6e4 + s*1e3;
}

// Create Date from combined date and time inputs
function getDate() {
  // Get date string, parse as local
  let d = parseISOLocal(document.getElementById('date').value);
  // Get time, convert to milliseconds
  let t = parseTime(document.getElementById('time').value);
  // Add time to date
  d.setMilliseconds(d.getMilliseconds() + t);
  // Debug
  console.log(d.toString());
  // Return date
  return d;
}

// Create date by concatenating date and time and
// using built-in parser
function getDate2(){
  // Get date string
  let d = document.getElementById('date').value;
  // Get time string
  let t = document.getElementById('time').value;
  // Debug
  console.log(new Date(d + 'T' + t).toString());
  // Join with T and use built-in parser
  return new Date(d + 'T' + t);
}

<input name="date" type="date" id="date" value="2020-12-12">
<input name="time" type="time" id="time" value="12:12:12">
<br>
<button onclick="getDate()">Get date manual parse</button>
<button onclick="getDate2()">Get date built-in parse</button>

There is also input type datetime (obsolete) and datetime-local, however support is lacking so not viable options.

Answer 3

Try this:

    let btn = document.getElementById('btn');

    btn.addEventListener('click', () => {
        let year = document.getElementById('year').value;
        let month = document.getElementById('month').value;
        let day = document.getElementById('day').value;
        let hours = document.getElementById('hours').value;
        let minutes = document.getElementById('minutes').value;
        let seconds = document.getElementById('seconds').value;
        
        let result = new Date(year, month, day, hours, minutes, seconds, 0);
        console.log(result);
        return result;
    })

    <input name="year" placeholder="year" type="number" id="year">
    <input name="month" placeholder="month" type="number" id="month">
    <input name="day" placeholder="day" type="number" id="day">
    <input name="hours" placeholder="hours" type="number" id="hours">
    <input name="minutes" placeholder="minutes" type="number" id="minutes">
    <input name="seconds" placeholder="seconds" type="number" id="seconds">

    <button type="button" id="btn">Get Date</button>