`,
providers: [NGB_DATEPICKER_VALUE_ACCESSOR, NgbDatepickerService, NgbDatepickerKeyMapService]
})
export class NgbDatepicker implements OnDestroy,
OnChanges, OnInit, ControlValueAccessor {
model: DatepickerViewModel;
private _subscription: Subscription;
private _selectSubscription: Subscription;
/**
* Reference for the custom template for the day display
*/
@Input() dayTemplate: TemplateRef;
/**
* Number of months to display
*/
@Input() displayMonths: number;
/**
* First day of the week. With default calendar we use ISO 8601: 'weekday' is 1=Mon ... 7=Sun
*/
@Input() firstDayOfWeek: number;
/**
* Callback to mark a given date as disabled.
* 'Current' contains the month that will be displayed in the view
*/
@Input() markDisabled: (date: NgbDateStruct, current: {year: number, month: number}) => boolean;
/**
* Max date for the navigation. If not provided, 'year' select box will display 10 years after current month
*/
@Input() maxDate: NgbDateStruct;
/**
* Min date for the navigation. If not provided, 'year' select box will display 10 years before current month
*/
@Input() minDate: NgbDateStruct;
/**
* Navigation type: `select` (default with select boxes for month and year), `arrows`
* (without select boxes, only navigation arrows) or `none` (no navigation at all)
*/
@Input() navigation: 'select' | 'arrows' | 'none';
/**
* The way to display days that don't belong to current month: `visible` (default),
* `hidden` (not displayed) or `collapsed` (not displayed with empty space collapsed)
*/
@Input() outsideDays: 'visible' | 'collapsed' | 'hidden';
/**
* Whether to display days of the week
*/
@Input() showWeekdays: boolean;
/**
* Whether to display week numbers
*/
@Input() showWeekNumbers: boolean;
/**
* Date to open calendar with.
* With default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec.
* If nothing or invalid date provided, calendar will open with current month.
* Use 'navigateTo(date)' as an alternative
*/
@Input() startDate: {year: number, month: number};
/**
* An event fired when navigation happens and currently displayed month changes.
* See NgbDatepickerNavigateEvent for the payload info.
*/
@Output() navigate = new EventEmitter();
/**
* An event fired when user selects a date using keyboard or mouse.
* The payload of the event is currently selected NgbDateStruct.
*/
@Output() select = new EventEmitter();
onChange = (_: any) => {};
onTouched = () => {};
constructor(
private _keyMapService: NgbDatepickerKeyMapService, public _service: NgbDatepickerService,
private _calendar: NgbCalendar, public i18n: NgbDatepickerI18n, config: NgbDatepickerConfig,
private _cd: ChangeDetectorRef, private _elementRef: ElementRef, private _ngbDateAdapter: NgbDateAdapter,
private _ngZone: NgZone) {
['dayTemplate', 'displayMonths', 'firstDayOfWeek', 'markDisabled', 'minDate', 'maxDate', 'navigation',
'outsideDays', 'showWeekdays', 'showWeekNumbers', 'startDate']
.forEach(input => this[input] = config[input]);
this._selectSubscription = _service.select$.subscribe(date => { this.select.emit(date.toStruct()); });
this._subscription = _service.model$.subscribe(model => {
const newDate = model.firstDate;
const oldDate = this.model ? this.model.firstDate : null;
const newSelectedDate = model.selectedDate;
const oldSelectedDate = this.model ? this.model.selectedDate : null;
const newFocusedDate = model.focusDate;
const oldFocusedDate = this.model ? this.model.focusDate : null;
this.model = model;
// handling selection change
if (isChangedDate(newSelectedDate, oldSelectedDate)) {
this.onTouched();
this.onChange(this._ngbDateAdapter.toModel(newSelectedDate));
}
// handling focus change
if (isChangedDate(newFocusedDate, oldFocusedDate) && oldFocusedDate && model.focusVisible) {
this.focus();
}
// emitting navigation event if the first month changes
if (!newDate.equals(oldDate)) {
this.navigate.emit({
current: oldDate ? {year: oldDate.year, month: oldDate.month} : null,
next: {year: newDate.year, month: newDate.month}
});
}
_cd.markForCheck();
});
}
/**
* Manually focus the focusable day in the datepicker
*/
focus() {
this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
const elementToFocus = this._elementRef.nativeElement.querySelector('div.ngb-dp-day[tabindex="0"]');
if (elementToFocus) {
elementToFocus.focus();
}
});
}
/**
* Navigates current view to provided date.
* With default calendar we use ISO 8601: 'month' is 1=Jan ... 12=Dec.
* If nothing or invalid date provided calendar will open current month.
* Use 'startDate' input as an alternative
*/
navigateTo(date?: {year: number, month: number}) { this._service.open(NgbDate.from(date)); }
ngOnDestroy() {
this._subscription.unsubscribe();
this._selectSubscription.unsubscribe();
}
ngOnInit() {
if (this.model === undefined) {
['displayMonths', 'markDisabled', 'firstDayOfWeek', 'navigation', 'minDate', 'maxDate'].forEach(
input => this._service[input] = this[input]);
this.navigateTo(this.startDate);
}
}
ngOnChanges(changes: SimpleChanges) {
['displayMonths', 'markDisabled', 'firstDayOfWeek', 'navigation', 'minDate', 'maxDate']
.filter(input => input in changes)
.forEach(input => this._service[input] = this[input]);
if ('startDate' in changes) {
this.navigateTo(this.startDate);
}
}
onDateSelect(date: NgbDate) {
this._service.focus(date);
this._service.select(date, {emitEvent: true});
}
onKeyDown(event: KeyboardEvent) { this._keyMapService.processKey(event); }
onNavigateDateSelect(date: NgbDate) { this._service.open(date); }
onNavigateEvent(event: NavigationEvent) {
switch (event) {
case NavigationEvent.PREV:
this._service.open(this._calendar.getPrev(this.model.firstDate, 'm', 1));
break;
case NavigationEvent.NEXT:
this._service.open(this._calendar.getNext(this.model.firstDate, 'm', 1));
break;
}
}
registerOnChange(fn: (value: any) => any): void { this.onChange = fn; }
registerOnTouched(fn: () => any): void { this.onTouched = fn; }
setDisabledState(isDisabled: boolean) { this._service.disabled = isDisabled; }
showFocus(focusVisible: boolean) { this._service.focusVisible = focusVisible; }
writeValue(value) { this._service.select(NgbDate.from(this._ngbDateAdapter.fromModel(value))); }
}