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

Answer 3

Try this (using jQuery)

$(() => {
    $(document).on("keydown", "input[type=date]", function (e) {
        if (e.ctrlKey === true) {
            if (e.keyCode === 67) {
                $(this).attr("type", "text").select();
                document.execCommand("copy");
                $(this).attr("type", "date");
            }
        }
    });
    $(document).bind("paste", function (e) {
        let $input = $(document.activeElement);
        if ($input.attr("type") === "date") {
            $input.val(e.originalEvent.clipboardData.getData('text'));
        }
    });
});

Answer 4

I made some changes to Red's answer, allowing date, datetime and datetime-local. A small change that I hope will help someone.

// get all date input fields
let dateInputs = document.querySelectorAll('[type="datetime-local"], [type="datetime"], [type="date"]');
dateInputs.forEach(el => {
    var type = el.type;
    // 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 = type;
    });
});

<br><label>Double click me</label>
<input type="date" value="2022-03-10" />
<input type="date" placeholder="paste the date here" />

<br><br><br><br>

<br><label>Double click me</label>
<input type="datetime-local" value="2022-03-10T09:50" />
<input type="datetime-local" placeholder="paste the date here" />