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 格式）并将其留给内置解析器，因为它应该被解析为本地，但可能不是（见 Why does Date.parse give incorrect results?）

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

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

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

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

3 个答案: