Is there a way to redirect the keyup KeyboardEvent from one native date input element to another in real time, similar to typing in two date inputs simultaneously?
I experimented with this code using a text input, and it worked perfectly.
However, when I attempted to apply the same concept to a date input, it didn't seem to work as expected: even though the event was dispatched, nothing appeared in the second date input field.
Here is the JSFiddle link for the code demonstration
This is how my code looks like: 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;
}