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

Question

我正在尝试通过 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')

现在我想将此日期和时间转换为 JavaScript 日期 object。 我想得到 output 像下面的这个字符串以及用户给出的相应日期和时间。

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 (obsolete) 和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>