Skip to content

Instantly share code, notes, and snippets.

@rob-balfre
Created April 3, 2017 08:06
Show Gist options
  • Save rob-balfre/d1ef9e92a262e5816737ae64b5bbe868 to your computer and use it in GitHub Desktop.
Save rob-balfre/d1ef9e92a262e5816737ae64b5bbe868 to your computer and use it in GitHub Desktop.
angular (v4) wrapper for flatpickr
import { Component, ViewChild, AfterViewInit, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as Flatpickr from 'flatpickr';
@Component({
selector: 'app-date-time-picker',
templateUrl: './date-time-picker.component.html',
styleUrls: ['./date-time-picker.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DateTimePickerComponent),
multi: true
}
]
})
export class DateTimePickerComponent implements ControlValueAccessor, AfterViewInit {
@ViewChild('date') dateEl: any;
data: any;
picker: any;
public writeValue(obj: any) {
if (obj) {
this.data = obj;
}
}
public registerOnChange(fn: any) {
this.propagateChange = fn;
}
public ngAfterViewInit() {
this.picker = new Flatpickr(this.dateEl.nativeElement, {
minDate: 'today',
altInput: true,
enableTime: true,
altFormat: 'l J F Y @ h:iK',
onChange: (date) => this.propagateChange(date[0] || '')
});
}
// not used, used for touch input
public registerOnTouched() {
}
private propagateChange = (_: any) => {};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment