将日期和时间转换为JavaScript日期格式

Question

我正试图通过HTML表单从用户那里获取日期和时间来安排任务。

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')

现在我想把这个日期和时间转换成一个JavaScript日期对象。我想得到如下字符串的输出，其中包含用户给定的相应日期和时间。

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

有人能帮我渡过难关吗？提前感谢

Answer 1

从input标记触发器获取数据可能会有所帮助。input的数据在脚本中定义为value。因此onclick事件在下面使用：

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

这是一个问题中的多个问题。

并非所有使用中的浏览器都支持输入类型日期，因此在这些情况下需要回退选项。在支持日期输入的情况下，该值将以yyyy-mm-dd格式的字符串形式返回。默认情况下，它被解析为UTC，但大多数人希望它被视为本地，因此也需要处理。

时间输入的值以hh:mm:ss格式返回，因此也需要将其解析为一些可用的形式

琐碎的答案是将日期和时间值与"；T"；(生成yyy-mm-ddThh:mm:ss格式(，并将其留给内置解析器，因为它应该被解析为本地，但可能不是(请参阅为什么Date.parse给出不正确的结果？(

一个更健壮的解决方案是分别解析日期和时间，然后组合这些值。您可以使用库，但简单的函数只是几行。

下面演示了这两种方法，希望评论足够了。

// 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>

还有输入类型datetime(已过时(和datetime local，但由于缺乏支持，因此不可行。

Answer 3

试试这个：

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>