无需按钮即可直接从日历中获取日期 Javascript/HTML

Question

我正在尝试直接从 HTML 日历输入获取日期，使用简单的控制台日志（用于测试目的），而不需要按钮。

我尝试了以下代码的一些变体：

<div class = "Comparisons_Wrapper">
    <input type="date" class="DateSelector" id = "DateSelector" onclick="getDate()">
</div>
<script>
    function getDate(){
        var date = document.getElementById("DateSelector").value;
        console.log(date)
    }
</script>

我希望 div 的 onclick 部分会在单击日历中的日期时调用该函数，而是在立即单击输入框打开时调用该函数日历，所以你最初得到一个空的 console.log 第一次，然后当你再次单击该框时，你会得到你最初输入的日期。我想这个假设对我来说太天真了。

如有任何帮助，我们将不胜感激，

谢谢詹姆斯

Answer 1

在这种情况下，您要做的是为输入的更改事件添加一个事件侦听器。

var dateInput = document.getElementById("DateSelector");
        
dateInput.addEventListener('change', function(event) {
   console.log(event.target.value)
});

<div class = "Comparisons_Wrapper">
    <input type="date" class="DateSelector" id = "DateSelector">
</div>

Answer 2

使用onchange等事件，如下：

function handler(e){
  alert(e.target.value);
}

<input type="date" class="DateSelector" id="DateSelector" onchange="handler(event);">

无需按钮即可直接从日历中获取日期 Javascript/HTML

Get date directly from a calendar without the need for a button Javascript/HTML

html

javascript

calendar