Enable copy/paste on html5 date field
By native?
No, a date input field behaves differently than a text input field.
Workaround
I had the same problem once and created a workaround.
When you dlbclick the input field, it temporarily changes itself to a text input field and automatically select its value. So you can copy the date by using CTRL + C
It also works when you want to copy a date from and text field into the date input field.
Register a focusout event to reset the input to its original state type="date".
// get all date input fields
let dateInputs = document.querySelectorAll('[type="date"]');
dateInputs.forEach(el => {
// register double click event to change date input to text input and select the value
el.addEventListener('dblclick', () => {
el.type = "text";
// After changing input type with JS .select() wont work as usual
// Needs timeout fn() to make it work
setTimeout(() => {
el.select();
})
});
// register the focusout event to reset the input back to a date input field
el.addEventListener('focusout', () => {
el.type = "date";
});
});input {
display: block;
width: 150px;
}<label>Double click me</label>
<input type="date" value="2011-09-29" />
<input type="date" placeholder="paste the date here" />