Set an invalid date string HTML5 date input

Question

I'm wondering if it is possible to set an invalid date string to an HTML5 date input after some JS check, for example "Today" instead of displaying XX-XX-XXXX date?

Note that I'm working with angular-1.6 that uses it's built-in directive that makes this hack harder to realize.

<input id="dateNative"
   type="date"
   ng-model="date.selectedDate"
   min="{{minDate | date:'yyyy-MM-dd'}}">


function Controller($scope, $log, $element, $document) {
  $scope.date = {};
  $scope.minDate = new Date();

  this.$postLink = () => {
    this.dateCtrl = angular.element($document[0].getElementById('dateNative')).controller('ngModel');
    this.dateCtrl.$parsers.unshift(date => {
      if (moment(new Date()).isSame(date, 'day')) {
        return 'Immediately';
      }
      return date;
    });
  };
}

charlietfl · Accepted Answer · 2017-08-09 15:32:42Z

1

Try changing the input type to text

this.dateCtrl.$parsers.unshift(date => {
  if (moment(new Date()).isSame(date, 'day')) {
    $element[0].type = 'text';
    return 'Immediately';
  }
  $element[0].type = 'date';
  return date;
});

answered Aug 9, 2017 at 15:32

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Trabelsi Mohamed Hedi Over a year ago

Like this I will lose the input date, specially the mobile experience the user will enter date manually ...

charlietfl Over a year ago

Well can't have it both ways...invalid value and keep date type. Will have to think of another way to do it then. Perhaps using <label for="dateNative">

Trabelsi Mohamed Hedi Over a year ago

Thank you, but this is not suitable for me, the UI team won't accept to add label to display selected date :D

charlietfl Over a year ago

Idea was only use the label for invalid values (over top input).... otherwise it won't be visible

georgeawg · Accepted Answer · 2017-08-09 15:39:26Z

1

The element can use interpolation to define the input type

<input id="dateNative"
   type="{{date.type}}"
   ng-model="date.selectedDate"
   min="{{minDate | date:'yyyy-MM-dd'}}" />

$scope.date.type = "text";
$scope.date.selectedDate = "Immediately";

answered Aug 9, 2017 at 15:39

georgeawg

49k13 gold badges78 silver badges98 bronze badges

3 Comments

Trabelsi Mohamed Hedi Over a year ago

Thank you, this is helpful, but it just need some work to make it more dynamic :)

georgeawg Over a year ago

I recommend that dynamic type changing be done inside a custom directive that is attached to the <input> element. Avoid doing DOM manipulation in a view controller.

georgeawg Over a year ago

For an example of a directive that changes an <input> type, see show-password directive on <input> element in angularjs.

Collectives™ on Stack Overflow

Set an invalid date string HTML5 date input

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related