JavaScript - 在 DATE 输入上重新调度 keyup 事件答案

【问题标题】：JavaScript - re-dispatch keyup event on DATE inputJavaScript - 在 DATE 输入上重新调度 keyup 事件
【发布时间】：2021-08-12 07:53:41
【问题描述】：

我正在寻找一种方法，将来自一个本地日期输入元素的keyupKeyboardEvent 重新调度到另一个实时（类似于同时写入两个日期输入）。

我用文本输入尝试了下面的代码，效果很好。

但是对日期输入使用相同的逻辑并不能完成这项工作：尽管接收到已调度的事件，但在第二个日期输入上没有写入任何内容。

Reproduced code in JSFiddle

这是我的代码： index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="main.js" defer></script>
</head>
<body>

  <input id="startDate" type="date" />
  <input id="endDate" type="date" />

  <input id="text1" type="text" />
  <input id="text2" type="text" />
</body>
</html>

main.js

let startDate = document.getElementById('startDate'),
    endDate = document.getElementById('endDate'),
    text1 = document.getElementById('text1'),
    text2 = document.getElementById('text2')
;

let endDateBinded = this.dispatchElementEvnt.bind(null,[endDate]),
    text2Binded = this.dispatchElementEvnt.bind(null,[text2]);

startDate.addEventListener('keyup', endDateBinded);
endDate.addEventListener('keyup',selfUpdate);

text1.addEventListener('keyup', text2Binded);
text2.addEventListener('keyup',selfUpdate);

function dispatchElementEvnt(secondElement,e){
    let event = new KeyboardEvent(e.type,e);
    secondElement[0].dispatchEvent(event);
}

function selfUpdate(e) {
    this.value += e.key;
}

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

问题是 startDate 在更改为有效日期（即 12/8/2021）之前是无效的（即 dd/mm/2021），因此很遗憾这两个日期都不会实时更改，但是两者都可以在 startDate 具有有效日期后进行更改。

信用：Changing two input type dates at the same time

下面的代码在设置 StartDate 后更改 endDate：

let startDate = document.getElementById('startDate'),
    endDate = document.getElementById('endDate'),
    text1 = document.getElementById('text1'),
    text2 = document.getElementById('text2')
;

let endDateBinded = this.dispatchElementEvnt2.bind(null,[endDate]),
    text2Binded = this.dispatchElementEvnt.bind(null,[text2]);

startDate.addEventListener('change', endDateBinded);
endDate.addEventListener('keyup',selfUpdate2);

text1.addEventListener('keyup', text2Binded);
text2.addEventListener('keyup',selfUpdate);

function dispatchElementEvnt(secondElement,e){
    let event = new KeyboardEvent(e.type,e);
    secondElement[0].dispatchEvent(event);
}

function selfUpdate(e) {
    this.value += e.key;
    
}
function dispatchElementEvnt2(secondElement,e){
    let event = new KeyboardEvent(e.type,e);
    secondElement[0].dispatchEvent(event);
    endDate.value= startDate.value;
}

function selfUpdate2(e) {
    this.value += e.key;
    
}

【讨论】：

你好@Vedran，首先我感谢你的尝试.. 把你放在上下文中：我昨天也做了同样的建议来为我的问题制定一个 B 计划（在你回答之前）。 . 但我仍然需要实时的解决方案，或者至少需要一个解决方法。我给你 +1 试试看。