如何在onChange事件中获取date类型input的日期值？

问题原因 #

• 第一次代码里，document.getElementById('sDate')拿到的是整个输入框DOM元素，不是选中的日期值，所以拼接后会显示[object HTMLInputElement]，必须访问元素的value属性才能拿到日期。
• 第二次代码里，const val = document.getElementById('sDate')执行时，DOM还没渲染出这个输入框，所以val是null。

正确写法 #

1. 用onChange事件参数直接取值（最方便） #

onChange触发时会自动传入事件对象，通过e.target.value就能直接拿到选中的日期，不用手动查找DOM：

<input
    type='date'
    id='sDate'
    onChange={functionSDateChange}
/>

// 函数定义
const functionSDateChange = (e) => {
    console.log('Start date changed to ' + e.target.value);
};

2. 原生JS场景：等DOM加载完再获取元素 #

如果是纯原生JS，要把获取元素的代码放在DOM加载完成之后，或者放在输入框标签后面：

<input
    type='date'
    id='sDate'
/>

<script>
// 等待DOM全部加载完成
document.addEventListener('DOMContentLoaded', function() {
    const dateInput = document.getElementById('sDate');
    dateInput.addEventListener('change', function() {
        console.log('Start date changed to ' + dateInput.value);
    });
});
</script>

3. React项目用useRef获取元素（可选） #

如果是React项目，也可以用useRef绑定输入框，避免每次查找DOM：

import { useRef } from 'react';

function DatePicker() {
    const dateRef = useRef(null);

    const functionSDateChange = () => {
        console.log('Start date changed to ' + dateRef.current.value);
    };

    return (
        <input
            type='date'
            ref={dateRef}
            onChange={functionSDateChange}
        />
    );
}

内容的提问来源于stack exchange，提问作者B A N G A T A