ngx-hijri-gregorian-datepicker/fesm2015/ngx-hijri-gregorian-datepicker.js

* 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

import * as i0 from '@angular/core';
import { Injectable, Component, EventEmitter, ViewChild, Input, Output, ViewEncapsulation, Directive, Optional, SkipSelf, NgModule } from '@angular/core';
import { NgbDate, NgbDateParserFormatter, NgbDatepickerI18n, NgbCalendar, NgbCalendarIslamicUmalqura, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import * as momentjs from 'moment';
import * as moment_ from 'moment-hijri';
import { DatePipe, CommonModule } from '@angular/common';
import { ControlContainer, NgForm, ReactiveFormsModule, FormsModule } from '@angular/forms';

class DateType {
}
DateType.Hijri = 1;
DateType.Gregorian = 2;

const moment$1 = momentjs;
const momentHijri$1 = moment_;
class DateFormatterService {
    constructor(parserFormatter) {
        this.parserFormatter = parserFormatter;
    }
    ToString(date) {
        const dateStr = this.parserFormatter.format(date);
        return dateStr;
    }
    ToHijriDateStruct(hijriDate, format) {
        const hijriMomentDate = momentHijri$1(hijriDate, format); // Parse a Hijri date based on format.
        const day = hijriMomentDate.iDate();
        const month = +hijriMomentDate.iMonth() + 1;
        const year = hijriMomentDate.iYear();
        const ngDate = new NgbDate(+year, month, +day);
        return ngDate;
    }
    ToGregorianDateStruct(gregorianDate, format) {
        const momentDate = moment$1(gregorianDate, format); // Parse a Gregorian date based on format.
        const day = momentDate.date();
        const month = +momentDate.month() + 1;
        const year = momentDate.year();
        const ngDate = new NgbDate(+year, +month, +day);
        return ngDate;
    }
    ToHijri(date) {
        if (!date) {
            return null;
        }
        const dateStr = this.ToString(date);
        const momentDate = momentHijri$1(dateStr, 'D/M/YYYY');
        const day = momentDate.iDate();
        const month = +momentDate.iMonth() + 1;
        const year = momentDate.iYear();
        const ngDate = new NgbDate(+year, month, +day);
        return ngDate;
    }
    ToGregorian(date) {
        if (!date) {
            return null;
        }
        const dateStr = this.ToString(date);
        const momentDate = momentHijri$1(dateStr, 'iD/iM/iYYYY');
        const day = momentDate.locale('en').format('D');
        const month = momentDate.locale('en').format('M');
        const year = momentDate.locale('en').format('Y');
        const ngDate = new NgbDate(+year, +month, +day);
        return ngDate;
    }
    GetTodayHijri() {
        const todayHijri = momentHijri$1().locale('en').format('iYYYY/iM/iD');
        return this.ToHijriDateStruct(todayHijri, 'iYYYY/iM/iD');
    }
    GetTodayGregorian() {
        const todayGregorian = moment$1().locale('en').format('YYYY/M/D');
        return this.ToGregorianDateStruct(todayGregorian, 'YYYY/M/D');
    }
}
DateFormatterService.decorators = [
    { type: Injectable }
];
DateFormatterService.ctorParameters = () => [
    { type: NgbDateParserFormatter }
];

class NgxHijriGregorianDatepickerService {
    constructor() { }
}
NgxHijriGregorianDatepickerService.ɵprov = i0.ɵɵdefineInjectable({ factory: function NgxHijriGregorianDatepickerService_Factory() { return new NgxHijriGregorianDatepickerService(); }, token: NgxHijriGregorianDatepickerService, providedIn: "root" });
NgxHijriGregorianDatepickerService.decorators = [
    { type: Injectable, args: [{
                providedIn: 'root'
            },] }
];
NgxHijriGregorianDatepickerService.ctorParameters = () => [];

class NgxHijriGregorianDatepickerComponent {
    constructor() { }
    ngOnInit() {
    }
}
NgxHijriGregorianDatepickerComponent.decorators = [
    { type: Component, args: [{
                selector: 'lib-ngx-hijri-gregorian-datepicker',
                template: `
    <p>
      ngx-hijri-gregorian-datepicker works!
    </p>
  `
            },] }
];
NgxHijriGregorianDatepickerComponent.ctorParameters = () => [];

const moment = momentjs;
const momentHijri = moment_;
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 }]
};

const WEEKDAYS = ['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت'];
const MONTHS = ['محرم', 'صفر', 'ربيع الأول', 'ربيع الآخر', 'جمادى الأولى', 'جمادى الآخرة', 'رجب', 'شعبان', 'رمضان', 'شوال',
    'ذو القعدة', 'ذو الحجة'];
class IslamicI18n extends NgbDatepickerI18n {
    getWeekdayShortName(weekday) {
        return WEEKDAYS[weekday - 1];
    }
    getMonthShortName(month) {
        return MONTHS[month - 1];
    }
    getMonthFullName(month) {
        return MONTHS[month - 1];
    }
    getDayAriaLabel(date) {
        return `${date.day}-${date.month}-${date.year}`;
    }
    getWeekdayLabel(weekday) {
        return WEEKDAYS[weekday - 1];
    }
}
IslamicI18n.decorators = [
    { type: Injectable }
];

class HijriDatepickerComponent {
    constructor() {
        this.selectedDateChange = new EventEmitter();
        this.readonly = false;
        this.isRequired = false;
        this.disabled = false;
    }
    changeDate() {
        this.selectedDateChange.emit(this.selectedDate);
    }
    onBlur() {
        if (!this.selectedDate) {
            this.selectedDateChange.emit(null);
        }
    }
    clear() {
        this.selectedDate = undefined;
        this.datePicker.close();
        this.selectedDateChange.emit(null);
    }
}
HijriDatepickerComponent.decorators = [
    { type: Component, args: [{
                selector: 'hijri-date-picker',
                template: "<div provideParentForm>\r\n<input\r\n    class=\"form-control hijriInput\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [placeholder]=\"placeHolder ?placeHolder : 'd/M/yyyy'\"\r\n    ngbDatepicker\r\n    (click)=\"d.toggle()\"\r\n    (dateSelect)=\"changeDate()\"\r\n    #d=\"ngbDatepicker\"\r\n    [readonly]=\"readonly\"\r\n    [minDate]=\"min\"\r\n    [maxDate]=\"max\"\r\n    [required]=\"isRequired\"\r\n    [name]=\"name\"\r\n    (blur)=\"onBlur()\"\r\n    [footerTemplate]=\"footerTemplate\"\r\n    [disabled]=\"disabled\" />\r\n</div>\r\n\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)=\"d.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",
                providers: [
                    { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
                    { provide: NgbDatepickerI18n, useClass: IslamicI18n }
                ],
                encapsulation: ViewEncapsulation.None,
                styles: [".hijriInput{border-top-left-radius:0;border-bottom-left-radius:0}.ngb-dp-weekday{width:2.1rem!important}\n"]
            },] }
];
HijriDatepickerComponent.ctorParameters = () => [];
HijriDatepickerComponent.propDecorators = {
    datePicker: [{ type: ViewChild, args: ['d',] }],
    selectedDate: [{ type: Input }],
    selectedDateChange: [{ type: Output }],
    readonly: [{ type: Input }],
    isRequired: [{ type: Input }],
    disabled: [{ type: Input }],
    min: [{ type: Input }],
    max: [{ type: Input }],
    name: [{ type: Input }],
    placeHolder: [{ type: Input }]
};

class CustomNgbDateParserFormatter extends NgbDateParserFormatter {
    constructor() {
        super();
        this.datePipe = new DatePipe('en-US');
    }
    format(date) {
        if (date === null) {
            return '';
        }
        try {
            return this.datePipe.transform(new Date(date.year, date.month - 1, date.day), 'd/M/yyyy');
        }
        catch (e) {
            return '';
        }
    }
    parse(value) {
        let returnVal;
        if (!value) {
            returnVal = null;
        }
        else {
            try {
                let dateParts = this.datePipe.transform(value, 'M-d-y').split('-');
                returnVal = { year: parseInt(dateParts[2]), month: parseInt(dateParts[0]), day: parseInt(dateParts[1]) };
            }
            catch (e) {
                returnVal = null;
            }
        }
        return returnVal;
    }
}
CustomNgbDateParserFormatter.decorators = [
    { type: Injectable }
];
CustomNgbDateParserFormatter.ctorParameters = () => [];

function test(form) {
    return form;
}
class ProvideParentFormDirective {
    constructor() { }
}
ProvideParentFormDirective.decorators = [
    { type: Directive, args: [{
                selector: '[provideParentForm]',
                providers: [
                    {
                        provide: ControlContainer,
                        useFactory: test,
                        deps: [[new Optional(), new SkipSelf(), NgForm]]
                    }
                ]
            },] }
];
ProvideParentFormDirective.ctorParameters = () => [];

class NgxHijriGregorianDatepickerModule {
}
NgxHijriGregorianDatepickerModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    NgxHijriGregorianDatepickerComponent,
                    HijriGregorianDatepickerComponent,
                    HijriDatepickerComponent,
                    ProvideParentFormDirective
                ],
                imports: [
                    CommonModule,
                    ReactiveFormsModule,
                    FormsModule,
                    NgbModule
                ],
                providers: [
                    { provide: NgbDateParserFormatter, useClass: CustomNgbDateParserFormatter },
                    DateFormatterService
                ],
                exports: [HijriGregorianDatepickerComponent, NgxHijriGregorianDatepickerComponent]
            },] }
];

/*
 * Public API Surface of ngx-hijri-gregorian-datepicker
 */

/**
 * Generated bundle index. Do not edit.
 */

export { DateFormatterService, DateType, HijriGregorianDatepickerComponent, NgxHijriGregorianDatepickerComponent, NgxHijriGregorianDatepickerModule, NgxHijriGregorianDatepickerService, HijriDatepickerComponent as ɵa, IslamicI18n as ɵb, test as ɵc, ProvideParentFormDirective as ɵd, CustomNgbDateParserFormatter as ɵe };
//# sourceMappingURL=ngx-hijri-gregorian-datepicker.js.map