New workaround w/o using mouse-clicks

It's 2025 and I'm having the same problem, at least within Chrome/Edge. I like Red's approach, but I wanted a solution which works without using the mouse.

Therefore, instead of using dblclick, my solution handles keydown and keyup events to turn the datepicker into a normal textfield whenever the user starts pressing the Ctrl-key. When Ctrl is released, the field is turned into a datepicker, again.

Please note:

• With my solution it's hard/impossible to select and copy parts of the date, e.g. just the month.
• I added el.select() to avoid confusion when the user just wants to press and release Ctrl+A, first.
• I added el.blur() and el.focus() to revoke the normal keyboard-focus on the date's first part.

So, here is my solution to enable using Ctrl+X and Ctrl+V inside native datepickers. I only tested it with Chrome/Edge, but I hope it should also work with other browsers.

const dateInputs = document.querySelectorAll('[type="date"]');

dateInputs.forEach(el => {
  el.addEventListener('keydown', (event) => {
    if (!event.repeat && event.ctrlKey && el.type !== "text") {
      el.type = "text";
      el.select();
    }
  });

  el.addEventListener('keyup', (event) => {
    if (!event.repeat && !event.ctrlKey && el.type !== "date") {
      el.blur();
      el.type = "date";
      el.focus();
    }
  });
});

input {
  display: block;
  width: 150px;
}

<input type="date" value="2011-09-29" />
<input type="date" />