Enable pasting into input[type='date']?

Question

It seems that a <input type='date' /> cannot be pasted into in Chrome. I've tried all sorts of formats including yyyy-MM-dd MM/dd/yyyy and even just pasting one component at a time (just the month or just the year) but nothing happens. I'm working in an angular app and I even tried setting up an onpaste event to push the pasted contents into an angular model but it never fires.

Here's what I have:

HTML

<input date-field type='date' ng-model='dateOfBirth'/>

Angular Directive:

'use strict';

angular.module('angularcoreApp').directive('dateField', function($filter) {
  return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModelController) {
        element[0].addEventListener('paste', function () {
          debugger;
          alert(arguments);
        }, false);
        ngModelController.$parsers = [];
        ngModelController.$parsers.push(function(data) {
          //View -> Model
          var date = Date.parseExact(data, "yyyy-MM-dd");
          ngModelController.$setValidity('date', date!=null);
          return date;
        });
        ngModelController.$formatters = [];
        ngModelController.$formatters.push(function(data) {
          //Model -> View
          return $filter('date')(data, "yyyy-MM-dd");
        });
       }
    }
});

I import datejs as well.

Currently I never hit the debugger statement in the paste event listener. No error is thrown and it doesn't seem that any value is entered into the view or the model.

How can I allow a date to be pasted into this input?

Answer 1

My workaround was something like this:

const input = document.getElementById('my-input');

document.querySelector('body').addEventListener('paste', (e) => {
  if (document.activeElement !== input) {
    return;
  }

  const value = e.clipboardData.getData('text');

  input.value = value;
});