Bootstrap 5 date input does not accept paste

Question

We recently upgraded an application from Bootstrap 4 to 5. Since the upgrade, users are unable to paste into <input type="date"... controls.

I scoured the Bootstrap 5.3.x documentation (forms section) and I cannot find any documentation about dates or how they are supposed to work. I have reviewed the entire Bootstrap JS and CSS and did not find anything about "clip", "paste", "date", etc.

For example, in this "Start Date", I can type into it and use the calendar UI, but if I copy a date into my clipboard like "12/12/2024" and paste, nothing happens.

I can hit Ctrl-A to select the date, but paste does not work in that state either.

Is there some way to support pasting into a date input?

I discovered that paste is missing in my context menu, so maybe that is a clue. This might be a default of HTML date input. The same problem exists on MDN.

FYI: on getbootstrap.com/docs/5.3/content/reboot/#forms (search for "Example date") I cannot paste either — jhole
– jhole, Commented Jul 1 at 14:28
This question is similar to: Enable copy/paste on html5 date field. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — traynor
– traynor, Commented Jul 3 at 7:56
it worked in bs 4 because you probably used some date picker, so you might check the migration process and if so, see if it's compatible with bs 5 and restore it — traynor
– traynor, Commented Jul 3 at 8:04

Jess · Accepted Answer · 2025-07-01 18:36:22Z

I found a way!

The code changes the input temporarily to a text input so you can copy and/or paste as needed.

This code supports pasting as MM/DD/YYYY and YYYY-MM-DD formats.

This could be improved by using Luxon date parsing.

document.addEventListener("DOMContentLoaded", function () {
    var isDate = function(date) {
      return (new Date(date) !== "Invalid Date") && !isNaN(new Date(date));
    }
    document.addEventListener("keydown", function (e) {
        if (
            e.target.matches('input[type="date"]') &&
            e.ctrlKey === true &&
            (e.key === "c" || e.key === "C" || e.keyCode === 67)
        ) {
            // Temporarily change to text to allow selection/copy
            const input = e.target;
            const prevType = input.type;
            input.type = "text";
            input.select();
            document.execCommand("copy");
            input.type = prevType;
            // Prevent default copy behavior
            e.preventDefault();
        }
    });

    document.addEventListener("paste", function (e) {
        const active = document.activeElement;
        if (active && active.type === "date") {
            // Get pasted text and set as value
            const pasted = (e.clipboardData || window.clipboardData).getData('text');
            if (isDate(pasted)) {
                active.value = (new Date(pasted)).toISOString().slice(0,10); //return YYYY-MM-DD;
            }
            // Prevent default paste behavior
            e.preventDefault();
        }
    });
});

<input type="date" value="2017-06-01" />

Collectives™ on Stack Overflow

Bootstrap 5 date input does not accept paste

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related