在javascript中输入日期，检测是否选择了年、月或日答案

【问题标题】：Date input in javascript, detect if year, month or day was selected在javascript中输入日期，检测是否选择了年、月或日
【发布时间】：2018-08-15 17:23:19
【问题描述】：

是否可以在输入日期字段的不同部分检测事件。

<input type="date" value="2018-08-15">

换句话说，用户是否选择了年、月或日（在这个特定场景中）。

【问题讨论】：

您的意思是通过select检测用户何时更改日、月或年？如果是这样，获取完整日期并检查数据的哪些字段已更改的 Javascript 函数对您来说是否合理？
我不认为有特定的事件或功能，您必须为此编写自己的js。更改时，检查与旧值相比有何变化
输入类型日期控件的呈现方式取决于实现，因此您无法确定是否有任何可以“选择”的控件。
记住，输入类型date - Safari 或 IE 不支持，Firefox 仅部分支持 - caniuse.com/#search=date
不，不是当用户更改值时，我的意思是当值被选中时。也许我应该澄清我想要做什么。我实现了一个日期选择器，使用纯 CSS 框架作为基础（bulma）。我想添加附加功能。如果您选择我希望日期选择器在“年视图”中打开的年份。因此，不幸的是，检测变化无济于事。

标签： javascript html events dom

【解决方案1】：

您可以使用 .split。从 0 开始，然后使用正则表达式在斜杠处分隔用户输入。现在您可以检查每个数组索引是否有默认值以外的值。

类似的东西。（未经测试）

var d = document.getElementById('date').value;
var dArray = d.split(0, /\//);
for (var i = 0; i < i.length; i++;) {
    if ((dArray[i] === 'mm') || (dArray[i] === 'dd') || (dArray[i] === 'yyyy') { 
        // date incomplete
    }
}

注意：日期元素还没有完整的浏览器支持。

【讨论】：

这应该是评论，不是答案。

【解决方案2】：

不幸的是，日期元素拒绝提供不完整的数据（如果日期不完整，value 不会返回任何内容），但是当它完成后，我们可以简单地检查上次更改时的更改，忽略空数组。

请注意change 事件仅在有效输入更改（或从有效输入到无效输入）时触发，因此如果日期输入（日期/月/年）的一部分无效，其他则不会触发更改，直到无效部分变为有效（这会触发更改）。

function dateListener(e) {
  let arr = e.target.value.split('-');
  if(!this.prevArr)this.prevArr=[];
  if(this.prevArr[0] != arr[0] && arr[0]) {
    console.log(`The year was changed from ${this.prevArr[0]} to ${arr[0]}`);
  }
  if(this.prevArr[1] != arr[1] && arr[1]) {
    console.log(`The month was changed from ${this.prevArr[1]} to ${arr[1]}`);
  }
  if(this.prevArr[2] != arr[2] && arr[2]) {
    console.log(`The date was changed from ${this.prevArr[2]} to ${arr[2]}`);
  }
  if(arr[0]) this.prevArr=arr; //If the date is falsey (undefined/empty string), so is the whole array.
};

document.getElementById("datefield").addEventListener("change", dateListener);

<input type="date" id="datefield" />

我们在这里所做的是利用函数是对象这一事实，并在函数上设置一个变量来保存输入的先前状态。当然我们不必这样做，我们可以创建一个未绑定到函数的变量来保存该日期，但我选择这样做是因为方便。

【讨论】：

这会在 Firefox 中引发错误。在 Safari 中，当日期的任何部分更改时，它会报告年份已更改。向 DOM 节点添加自定义属性不是一个好主意。当作为侦听器调用时，e.srcElement === this，最好使用其中一个，而不是同时使用。
@RobG 看来你是对的，这是我的愚蠢错误：P 已修复
“不幸的是，日期元素拒绝提供不完整的数据” - 这可以通过预先填充日期值来解决。