时间戳

首页 > 解决方案 > JavaScript - 在 DATE 输入上重新调度 keyup 事件

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

问题描述

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

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

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

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;
}

标签： javascriptangularjs

解决方案

The issue is that the startDate is invalid (i.e. dd/mm/2021) until it is changed to a valid date (i.e. 12/8/2021) so unfortunately both dates won't change in real time, however both can be changed after startDate has a valid date.

credit: Changing two input type dates at the same time

The code below changes the endDate after the StartDate is set:

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;
    
}

推荐阅读