Enable copy/paste on html5 date field

Question

Am able to copy values from textbox and paste into another textbox in my html5 form. Same way how can i copy value from the date field.

<input type="date" />

I want to copy value from one date field and paste it to another date field.

Answer 1

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" />

Answer 2

So, you can do this with jQuery using the copy and paste events to take the value from one and insert it in to another using a fake clipboard.

Update

Note: I've just found a weird quirk with this. If you click on the first date box and type a date, you then need to click OFF the input before copying. The same goes for pasting in to the second box. I can't figure out why this is.

var dateClipboard;

$("input[type='date']").on("copy", function(){
 dateClipboard = $(this).val();
 alert("copied");
})

$("input[type='date']").on("paste", function(){
 if(dateClipboard != ''){
   $(this).val(dateClipboard); 
   alert("pasted");
 }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input type="date" name="test" id="test">
<input type="date" name="test" id="test2">