ngx-hijri-gregorian-datepicker
Version:
* Lightweight **Angular** datepicker based on [ng-bootstrap](https://ng-bootstrap.github.io/#/components/datepicker/overview) that supports **Gregorian** and **Hijri** calendars. * Provides ability to swap between **Gregorian** and **Hijri** calendars
91 lines • 13.2 kB
JavaScript
import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { DateType } from './consts';
import { DateFormatterService } from './date-formatter.service';
import * as momentjs from 'moment';
const moment = momentjs;
import * as moment_ from 'moment-hijri';
const momentHijri = moment_;
export class HijriGregorianDatepickerComponent {
constructor(dateFormatterService) {
this.dateFormatterService = dateFormatterService;
this.selectedDateChange = new EventEmitter();
this.showLabel = true;
this.readonly = false;
this.isRequired = false;
this.disabled = false;
}
get DateType() {
return DateType;
}
ngOnInit() {
if (!this.selectedDateType) {
this.selectedDateType = DateType.Hijri;
}
}
close() {
this.datePicker.close();
}
clear() {
this.selectedDate = undefined;
this.close();
this.selectedDateChange.emit(null);
}
getSelectedDate() {
let formattedDate = this.dateFormatterService.ToString(this.selectedDate);
if (this.selectedDateType == DateType.Hijri) {
return momentHijri(formattedDate, 'iD/iM/iYYYY').locale('en').format();
}
if (this.selectedDateType == DateType.Gregorian) {
return moment(formattedDate, 'D/M/YYYY').locale('en').format();
}
}
dateSelected() {
this.selectedDateChange.emit(this.selectedDate);
}
hijriClick() {
if (this.selectedDateType == DateType.Hijri) {
return;
}
this.selectedDateType = DateType.Hijri;
//to hijri
this.selectedDate = this.dateFormatterService.ToHijri(this.selectedDate);
this.selectedDateChange.emit(this.selectedDate);
}
gregClick() {
if (this.selectedDateType == DateType.Gregorian) {
return;
}
this.selectedDateType = DateType.Gregorian;
//to Gregorian
this.selectedDate = this.dateFormatterService.ToGregorian(this.selectedDate);
this.selectedDateChange.emit(this.selectedDate);
}
}
HijriGregorianDatepickerComponent.decorators = [
{ type: Component, args: [{
selector: 'hijri-gregorian-datepicker',
template: "\r\n <div class=\"form-group\" provideParentForm>\r\n <label class=\"requiredInput\" *ngIf=\"showLabel\" for=\"input-birth-Date\">{{ label }} </label>\r\n\r\n <div class=\"input-group\">\r\n\r\n <input class=\"form-control\"\r\n [placeholder]=\"placeHolder ? placeHolder : 'd/M/yyyy'\"\r\n [name]=\"label\"\r\n *ngIf=\"selectedDateType == DateType.Gregorian\"\r\n [(ngModel)]=\"selectedDate\"\r\n ngbDatepicker (click)=\"d.toggle()\"\r\n (dateSelect)=\"dateSelected()\"\r\n autocomplete=\"off\"\r\n [readonly]=\"readonly\"\r\n [minDate]=\"minGreg\"\r\n [maxDate]=\"maxGreg\"\r\n [required]=\"isRequired\"\r\n [disabled]=\"disabled\"\r\n [footerTemplate]=\"footerTemplate\"\r\n #d=\"ngbDatepicker\">\r\n\r\n <ng-template #footerTemplate>\r\n <hr class=\"my-0\">\r\n <button class=\"btn btn-secondary btn-sm m-2 float-right\" type=\"button\" (click)=\"close()\">Close</button>\r\n <button class=\"btn btn-primary btn-sm m-2 float-left\" type=\"button\" (click)=\"clear()\">Clear</button>\r\n </ng-template>\r\n\r\n <hijri-date-picker *ngIf=\"selectedDateType == DateType.Hijri\"\r\n [(selectedDate)]=\"selectedDate\"\r\n (selectedDateChange)=\"dateSelected()\"\r\n [readonly]=\"readonly\"\r\n [min]=\"minHijri\" [max]=\"maxHijri\"\r\n style=\"position: relative;flex: 1 1 auto;width: 1%; min-width: 0;margin-bottom: 0;\"\r\n [name]=\"label\"\r\n [isRequired]=\"isRequired\"\r\n [placeHolder]=\"placeHolder\"\r\n [disabled]=\"disabled\">\r\n </hijri-date-picker>\r\n\r\n <div class=\"input-group-append\">\r\n <button class=\"btn btn-sm {{selectedDateType == DateType.Hijri ? 'btn-info focus active' : 'btn-outline-info'}}\" (click)=\"hijriClick()\" [disabled]=\"disabled\" type=\"button\">\r\n {{hijriLabel ? hijriLabel : 'Hijri' }}\r\n </button>\r\n <button class=\"btn btn-sm {{selectedDateType == DateType.Gregorian ? 'btn-info focus active' : 'btn-outline-info'}}\" (click)=\"gregClick()\" [disabled]=\"disabled\" type=\"button\">\r\n {{GregLabel ? GregLabel : 'Gregorian' }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n"
},] }
];
HijriGregorianDatepickerComponent.ctorParameters = () => [
{ type: DateFormatterService }
];
HijriGregorianDatepickerComponent.propDecorators = {
datePicker: [{ type: ViewChild, args: ['d',] }],
selectedDateType: [{ type: Input }],
selectedDate: [{ type: Input }],
selectedDateChange: [{ type: Output }],
label: [{ type: Input }],
showLabel: [{ type: Input }],
readonly: [{ type: Input }],
isRequired: [{ type: Input }],
disabled: [{ type: Input }],
minHijri: [{ type: Input }],
maxHijri: [{ type: Input }],
minGreg: [{ type: Input }],
maxGreg: [{ type: Input }],
hijriLabel: [{ type: Input }],
GregLabel: [{ type: Input }],
placeHolder: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGlqcmktZ3JlZ29yaWFuLWRhdGVwaWNrZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWhpanJpLWdyZWdvcmlhbi1kYXRlcGlja2VyL3NyYy9saWIvaGlqcmktZ3JlZ29yaWFuLWRhdGVwaWNrZXIvaGlqcmktZ3JlZ29yaWFuLWRhdGVwaWNrZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTFGLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDcEMsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFFaEUsT0FBTyxLQUFLLFFBQVEsTUFBTSxRQUFRLENBQUM7QUFDbkMsTUFBTSxNQUFNLEdBQUcsUUFBUSxDQUFDO0FBR3hCLE9BQU8sS0FBSyxPQUFPLE1BQU0sY0FBYyxDQUFDO0FBRXhDLE1BQU0sV0FBVyxHQUFHLE9BQU8sQ0FBQztBQU81QixNQUFNLE9BQU8saUNBQWlDO0lBK0I1QyxZQUFxQixvQkFBMEM7UUFBMUMseUJBQW9CLEdBQXBCLG9CQUFvQixDQUFzQjtRQXhCckQsdUJBQWtCLEdBQWdDLElBQUksWUFBWSxFQUFFLENBQUM7UUFHdEUsY0FBUyxHQUFHLElBQUksQ0FBQztRQUdqQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsYUFBUSxHQUFHLEtBQUssQ0FBQztJQWdCeUMsQ0FBQztJQUpwRSxJQUFJLFFBQVE7UUFDVixPQUFPLFFBQVEsQ0FBQztJQUNsQixDQUFDO0lBSUQsUUFBUTtRQUNOLElBQUksQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7WUFDMUIsSUFBSSxDQUFDLGdCQUFnQixHQUFHLFFBQVEsQ0FBQyxLQUFLLENBQUM7U0FDeEM7SUFDSCxDQUFDO0lBRUQsS0FBSztRQUNILElBQUksQ0FBQyxVQUFVLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELEtBQUs7UUFDSCxJQUFJLENBQUMsWUFBWSxHQUFHLFNBQVMsQ0FBQztRQUM5QixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDYixJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3JDLENBQUM7SUFDRCxlQUFlO1FBRWIsSUFBSSxhQUFhLEdBQUcsSUFBSSxDQUFDLG9CQUFvQixDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7UUFFMUUsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLElBQUksUUFBUSxDQUFDLEtBQUssRUFBRTtZQUMzQyxPQUFPLFdBQVcsQ0FBQyxhQUFhLEVBQUUsYUFBYSxDQUFDLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLE1BQU0sRUFBRSxDQUFDO1NBQ3hFO1FBRUQsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLElBQUksUUFBUSxDQUFDLFNBQVMsRUFBRTtZQUMvQyxPQUFPLE1BQU0sQ0FBQyxhQUFhLEVBQUUsVUFBVSxDQUFDLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLE1BQU0sRUFBRSxDQUFDO1NBQ2hFO0lBQ0gsQ0FBQztJQUVELFlBQVk7UUFDVixJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUNsRCxDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksSUFBSSxDQUFDLGdCQUFnQixJQUFJLFFBQVEsQ0FBQyxLQUFLLEVBQUU7WUFDM0MsT0FBTztTQUNSO1FBQ0QsSUFBSSxDQUFDLGdCQUFnQixHQUFHLFFBQVEsQ0FBQyxLQUFLLENBQUM7UUFDdkMsVUFBVTtRQUNWLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLG9CQUFvQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDekUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUNELFNBQVM7UUFDUCxJQUFJLElBQUksQ0FBQyxnQkFBZ0IsSUFBSSxRQUFRLENBQUMsU0FBUyxFQUFFO1lBQy9DLE9BQU87U0FDUjtRQUNELElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxRQUFRLENBQUMsU0FBUyxDQUFDO1FBQzNDLGNBQWM7UUFDZCxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQzdFLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ2xELENBQUM7OztZQXRGRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLDRCQUE0QjtnQkFDdEMseXNGQUEwRDthQUMzRDs7O1lBZFEsb0JBQW9COzs7eUJBaUIxQixTQUFTLFNBQUMsR0FBRzsrQkFHYixLQUFLOzJCQUNMLEtBQUs7aUNBQ0wsTUFBTTtvQkFFTixLQUFLO3dCQUNMLEtBQUs7dUJBR0wsS0FBSzt5QkFDTCxLQUFLO3VCQUNMLEtBQUs7dUJBRUwsS0FBSzt1QkFDTCxLQUFLO3NCQUNMLEtBQUs7c0JBQ0wsS0FBSzt5QkFFTCxLQUFLO3dCQUNMLEtBQUs7MEJBRUwsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge05nYkRhdGVTdHJ1Y3QsIE5nYkRhdGVwaWNrZXJ9IGZyb20gJ0BuZy1ib290c3RyYXAvbmctYm9vdHN0cmFwJztcclxuaW1wb3J0IHsgRGF0ZVR5cGUgfSBmcm9tICcuL2NvbnN0cyc7XHJcbmltcG9ydCB7IERhdGVGb3JtYXR0ZXJTZXJ2aWNlIH0gZnJvbSAnLi9kYXRlLWZvcm1hdHRlci5zZXJ2aWNlJztcclxuXHJcbmltcG9ydCAqIGFzIG1vbWVudGpzIGZyb20gJ21vbWVudCc7XHJcbmNvbnN0IG1vbWVudCA9IG1vbWVudGpzO1xyXG5cclxuXHJcbmltcG9ydCAqIGFzIG1vbWVudF8gZnJvbSAnbW9tZW50LWhpanJpJztcclxuaW1wb3J0IHsgTmdGb3JtLCBDb250cm9sQ29udGFpbmVyIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5jb25zdCBtb21lbnRIaWpyaSA9IG1vbWVudF87XHJcblxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdoaWpyaS1ncmVnb3JpYW4tZGF0ZXBpY2tlcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2hpanJpLWdyZWdvcmlhbi1kYXRlcGlja2VyLmNvbXBvbmVudC5odG1sJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgSGlqcmlHcmVnb3JpYW5EYXRlcGlja2VyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgQFZpZXdDaGlsZCgnZCcpIGRhdGVQaWNrZXI6IGFueTtcclxuXHJcblxyXG4gIEBJbnB1dCgpIHNlbGVjdGVkRGF0ZVR5cGU6IERhdGVUeXBlO1xyXG4gIEBJbnB1dCgpIHNlbGVjdGVkRGF0ZTogTmdiRGF0ZVN0cnVjdDtcclxuICBAT3V0cHV0KCkgc2VsZWN0ZWREYXRlQ2hhbmdlOiBFdmVudEVtaXR0ZXI8TmdiRGF0ZVN0cnVjdD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgc2hvd0xhYmVsID0gdHJ1ZTtcclxuXHJcblxyXG4gIEBJbnB1dCgpIHJlYWRvbmx5ID0gZmFsc2U7XHJcbiAgQElucHV0KCkgaXNSZXF1aXJlZCA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XHJcblxyXG4gIEBJbnB1dCgpIG1pbkhpanJpOiBOZ2JEYXRlU3RydWN0O1xyXG4gIEBJbnB1dCgpIG1heEhpanJpOiBOZ2JEYXRlU3RydWN0O1xyXG4gIEBJbnB1dCgpIG1pbkdyZWc6IE5nYkRhdGVTdHJ1Y3Q7XHJcbiAgQElucHV0KCkgbWF4R3JlZzogTmdiRGF0ZVN0cnVjdDtcclxuXHJcbiAgQElucHV0KCkgaGlqcmlMYWJlbDogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIEdyZWdMYWJlbDogc3RyaW5nO1xyXG5cclxuICBASW5wdXQoKSBwbGFjZUhvbGRlcjogc3RyaW5nO1xyXG5cclxuICBnZXQgRGF0ZVR5cGUoKSB7XHJcbiAgICByZXR1cm4gRGF0ZVR5cGU7XHJcbiAgfVxyXG5cclxuICBjb25zdHJ1Y3RvciggcHJpdmF0ZSBkYXRlRm9ybWF0dGVyU2VydmljZTogRGF0ZUZvcm1hdHRlclNlcnZpY2UpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIGlmICghdGhpcy5zZWxlY3RlZERhdGVUeXBlKSB7XHJcbiAgICAgIHRoaXMuc2VsZWN0ZWREYXRlVHlwZSA9IERhdGVUeXBlLkhpanJpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgY2xvc2UoKSB7XHJcbiAgICB0aGlzLmRhdGVQaWNrZXIuY2xvc2UoKTtcclxuICB9XHJcblxyXG4gIGNsZWFyKCkge1xyXG4gICAgdGhpcy5zZWxlY3RlZERhdGUgPSB1bmRlZmluZWQ7XHJcbiAgICB0aGlzLmNsb3NlKCk7XHJcbiAgICB0aGlzLnNlbGVjdGVkRGF0ZUNoYW5nZS5lbWl0KG51bGwpO1xyXG4gIH1cclxuICBnZXRTZWxlY3RlZERhdGUoKTogc3RyaW5nIHtcclxuXHJcbiAgICBsZXQgZm9ybWF0dGVkRGF0ZSA9IHRoaXMuZGF0ZUZvcm1hdHRlclNlcnZpY2UuVG9TdHJpbmcodGhpcy5zZWxlY3RlZERhdGUpO1xyXG5cclxuICAgIGlmICh0aGlzLnNlbGVjdGVkRGF0ZVR5cGUgPT0gRGF0ZVR5cGUuSGlqcmkpIHtcclxuICAgICAgcmV0dXJuIG1vbWVudEhpanJpKGZvcm1hdHRlZERhdGUsICdpRC9pTS9pWVlZWScpLmxvY2FsZSgnZW4nKS5mb3JtYXQoKTtcclxuICAgIH1cclxuXHJcbiAgICBpZiAodGhpcy5zZWxlY3RlZERhdGVUeXBlID09IERhdGVUeXBlLkdyZWdvcmlhbikge1xyXG4gICAgICByZXR1cm4gbW9tZW50KGZvcm1hdHRlZERhdGUsICdEL00vWVlZWScpLmxvY2FsZSgnZW4nKS5mb3JtYXQoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGRhdGVTZWxlY3RlZCgpIHtcclxuICAgIHRoaXMuc2VsZWN0ZWREYXRlQ2hhbmdlLmVtaXQodGhpcy5zZWxlY3RlZERhdGUpO1xyXG4gIH1cclxuXHJcbiAgaGlqcmlDbGljaygpIHtcclxuICAgIGlmICh0aGlzLnNlbGVjdGVkRGF0ZVR5cGUgPT0gRGF0ZVR5cGUuSGlqcmkpIHtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG4gICAgdGhpcy5zZWxlY3RlZERhdGVUeXBlID0gRGF0ZVR5cGUuSGlqcmk7XHJcbiAgICAvL3RvIGhpanJpXHJcbiAgICB0aGlzLnNlbGVjdGVkRGF0ZSA9IHRoaXMuZGF0ZUZvcm1hdHRlclNlcnZpY2UuVG9IaWpyaSh0aGlzLnNlbGVjdGVkRGF0ZSk7XHJcbiAgICB0aGlzLnNlbGVjdGVkRGF0ZUNoYW5nZS5lbWl0KHRoaXMuc2VsZWN0ZWREYXRlKTtcclxuICB9XHJcbiAgZ3JlZ0NsaWNrKCkge1xyXG4gICAgaWYgKHRoaXMuc2VsZWN0ZWREYXRlVHlwZSA9PSBEYXRlVHlwZS5HcmVnb3JpYW4pIHtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG4gICAgdGhpcy5zZWxlY3RlZERhdGVUeXBlID0gRGF0ZVR5cGUuR3JlZ29yaWFuO1xyXG4gICAgLy90byBHcmVnb3JpYW5cclxuICAgIHRoaXMuc2VsZWN0ZWREYXRlID0gdGhpcy5kYXRlRm9ybWF0dGVyU2VydmljZS5Ub0dyZWdvcmlhbih0aGlzLnNlbGVjdGVkRGF0ZSk7XHJcbiAgICB0aGlzLnNlbGVjdGVkRGF0ZUNoYW5nZS5lbWl0KHRoaXMuc2VsZWN0ZWREYXRlKTtcclxuICB9XHJcbn1cclxuIl19