如何将日期输入和时间输入视为本地时间，而不是通用时间？ [英] How to treat date-input and time-input as local time, rather than universal time?

问题描述

用户输入 2019-12-22 的日期输入将给出以下值：

a date input where the user enters 2019-12-22 gives these values:

• input.value ： 2019-12-22


• input.valueAsNumber ： 1576972800000


• input.valueAsDate ： 2019年12月21日星期六GMT-0800（太平洋标准时间）
  
  
  
  
  • 生成的日期对象似乎是错误的
  
  
  • 当浏览器返回值时，它将用户输入视为通用时间
  
  
  • ，因此日期对象的utc表示形式与输入向用户显示的内容相同
  
  
  • input.valueAsDate。 getUTCDate（）返回 22 ，这是用户输入的内容
  
  
  • 输入.valueAsDate.getDate（）返回 21 ，而不是用户输入的内容
  
  
  • 因此我们得出日期输入显示并接受utc时间，而不是本地时间
  
  
  • input.value: "2019-12-22"
  • input.valueAsNumber: 1576972800000
  • input.valueAsDate: "Sat Dec 21 2019 16:00:00 GMT-0800 (Pacific Standard Time)"
    • this resulting date object just seems wrong
    • when the browser returns a value, it treats the user input as universal time
    • so the date object's utc representation is the same as what the input displays to the user
    • input.valueAsDate.getUTCDate() returns 22, which is what the user entered
    • input.valueAsDate.getDate() returns 21, NOT what the user entered
    • thus we conclude the date input displays and accepts utc time, not local times

    我们希望结果 date.toString（）显示与date-input中原始用户输入相同的结果

    we want the resulting date.toString() to show the same result as the original user input in the date-input

    如何允许用户与当地时间互动，然后在脚本中获取正确的日期对象？

    how can we allow users to interact with local times, but then obtain a correct date object in our scripts?

    推荐答案

    此问题这是由TC-39决定将仅日期的ISO 8601格式时间戳记为UTC来决定的，而与ISO 8601保持一致并把它们视为本地则更合乎逻辑。请参阅 为什么Date.parse给出不正确的结果？

    This issue is caused by a decision by the TC-39 to treat date–only ISO 8601 format timestamps as UTC, when it would have been more logical to be consistent with ISO 8601 and treated them as local. See Why does Date.parse give incorrect results?

    简单的解决方案是手动解析字符串，请勿使用内置的解析器，至少是当前的一种实现直到最近将YYYY-MM-DD解析为本地。另外，请勿使用当前时区偏移量来调整时间值，因为这不允许偏移量的历史性更改或可能的夏时制更改。

    The simple solution is to manually parse the string, do not use the built–in parser, as at least one current implementation until recently parsed YYYY-MM-DD as local. Also, do not use the current timezone offset to adjust the time value as that doesn't allow for historic changes in offsets or possible daylight saving changes.

    // Parse timestamp in YYYY-MM-DD format as local
    function parseISOLocal(s) {
      let [y, m, d] = s.split(/\D/);
      return new Date(y, --m, d);
    }
    
    // Format date as YYYY-MM-DD local
    function formatISOLocal(d) {
      let z = n => (n<10?'0':'') + n;
      return d.getFullYear() + '-' + z(d.getMonth()+1) + '-' + z(d.getDate());
    }
    
    let s = '2019-12-22';
    let d = parseISOLocal(s);
    console.log( d.toString());
    console.log( formatISOLocal(d));

    其中支持输入类型日期，并且根据ECMA-262将YYYY-MM-DD解析为UTC，您可以使用 valueAsDate 和UTC方法。但是，并非所有浏览器都支持输入类型日期，也不是所有解析器都会将该格式解析为UTC。

    Where input type date is supported and YYYY-MM-DD is parsed per ECMA-262 as UTC, you can use valueAsDate and UTC methods. However, not all browsers support input type date and not all parsers will parse that format as UTC.

    不依赖输入类型日期并手动解析要可靠得多。值，检查格式和有效性。这就是为什么通常使用日期小部件和库而不是内置的日期功能的原因之一。

    It's much more reliable to not rely on input type date and to manually parse the value, checking format and validity. This is one reason why date widgets and libraries are commonly used instead of built–in Date functionality.

    let inp = document.getElementById('dob');
    let dobObj = inp.valueAsDate;
    let dobStr = inp.value;
    
    console.log('Value as date: ' + dobObj);   // Safari: null
    console.log('Value as string: ' + dobStr); // 2018-06-15

    <input id="dob" type="date" value="2018-06-15">

    这篇关于如何将日期输入和时间输入视为本地时间，而不是通用时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！