Using HTML5 Date Input with Date Objects and Angular

Using HTML input elements, we can set the value via the value attribute or property. For date inputs, the value is a string type with the yyyy-dd-mm format.

<input type="date" value="2020-11-30" />
<script>
  const input = document.querySelector('input');
  input.value = '2020-11-30';
</script>

When using Angular forms, we bind to the formControl or ngModel directives to
set the form inputs. However, Angular forms set inputs via the value property.
We have to convert to and from the yyyy-dd-mm date string format if we are working with date objects in our application.

Fortunately, we have a couple of workarounds to make it easier to use Date objects and HTML5 date inputs in Angular.

Using ValueAsDate with HTML5 Datepicker

While the HTML5 datepicker uses a date string for value, it can also set the value with an alternate property called valueAsDate. This allows us to set or get the datepicker value as a JavaScript Date object.

<input type="date" />
<script>
  const input = document.querySelector('input');
  input.valueAsDate = new Date();
</script>

Using Angular and its property/event syntax, we can get and set the valueAsDate property.

<label>Native property/event binding</label>
<input type="date" [valueAsDate]="dateObj" (change)="dateObj = $event.target.valueAsDate" />

This allows our input to use Date objects, but now we no longer use Angular forms losing its benefits. We can work around this limitation by creating a custom Angular Form Control Directive to intercept and map to a Date object or string dynamically.

Form Control Directive

We can enable date objects on our native date inputs by creating an Angular Form Directive that will select an input[type=date] selectors.

import { Directive, ElementRef, HostListener, Renderer2, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
  selector: 'input[type=date][ngModel], input[type=date][formControl]',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => DateInputConverter),
    multi: true
  }]
})
export class DateInputConverter implements ControlValueAccessor {

}

This directive will only enable our date object behavior on date inputs using Angular Form inputs.

import { Directive, ElementRef, HostListener, Renderer2, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
  selector: 'input[type=date][ngModel], input[type=date][formControl]',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => DateInputConverter),
    multi: true
  }]
})
export class DateInputConverter implements ControlValueAccessor {
  @HostListener('blur', []) onTouched: any = () => { };
  @HostListener('input', ['$event']) onChange: any = () => { };

  private valueType: 'value' | 'valueAsDate' = 'value';

  constructor(private renderer: Renderer2, private elementRef: ElementRef) { }

  registerOnTouched(fn: () => void) { this.onTouched = fn; }

  registerOnChange(fn: (value: any) => void) {
    this.onChange = (event: any) => fn(event.target[this.valueType])
  }

  writeValue(value: Date | string) {
    this.valueType = typeof value === 'string' ? 'value' : 'valueAsDate';
    this.renderer.setProperty(this.elementRef.nativeElement, this.valueType, value);
  }
}

With our directive instance, we can default to the native default string value.
However, we can dynamically switch this if the date input receives a date object. Once set as a date object, our directive will return date objects from our native input rather than date strings.

This gives us the flexibility to not break default native behavior but also adds Date object support to our date inputs.

@Component({
  selector: 'my-app',
  template: `
    <label for="date-string">Regular string value</label>
    <input [formControl]="dateStringControl" type="date" id="date-string" />

    <label for="date-object">Date object value with directive help</label>
    <input [formControl]="dateObjectControl" type="date" id="date-object" />
  `
})
export class AppComponent  {
  dateStringControl = new FormControl('2020-09-28');
  dateObjectControl = new FormControl(new Date());
}

Using Angular forms and directives, we can get the best of both worlds using JavaScript Date objects and built in date inputs. Check out the full working demo below!