Cory Rylan

My name is . Google Developer Expert, speaker, and Software Developer at VMware Clarity Design System.

Follow @coryrylan
Angular

Using HTML5 Date Input with Date Objects and Angular

Cory Rylan

- 3 minutes

This article has been updated to the latest version Angular 12 and tested with Angular 11. The content is likely still applicable for all Angular 2 + versions.

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!

View Demo Code   
 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

Angular

Measuring Angular Performance with Source Map Explorer

Learn how to identify performance bottlenecks in your Angular application with the Source Map Explorer tool.

Read Article
Angular

Intro to Angular Http Interceptors

Learn the basics of using Http Interceptors to handle Http requests in Angular.

Read Article
Angular

Using NgOnDestroy with Services in Angular

Learn how to use NgOnDestroy to clean up tasks in Angular Services.

Read Article