kfmc_website/src/app/higri-date/higri-date.component.ts

import { Component, Injectable, OnInit, EventEmitter, Output, Input } from '@angular/core';

import {
  NgbDate,NgbDateStruct, NgbCalendar, NgbCalendarIslamicUmalqura, NgbDatepickerI18n
} from '@ng-bootstrap/ng-bootstrap';

const WEEKDAYS = ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'];
const MONTHS = ['محرم', 'صفر', 'ربيع الأول', 'ربيع الآخر', 'جمادى الأولى', 'جمادى الآخرة', 'رجب', 'شعبان', 'رمضان', 'شوال',
  'ذو القعدة', 'ذو الحجة'];

  @Injectable()
  export class IslamicI18n extends NgbDatepickerI18n {
    getWeekdayShortName(weekday: number) {
      return WEEKDAYS[weekday - 1];
    }

    getMonthShortName(month: number) {
      return MONTHS[month - 1];
    }

    getMonthFullName(month: number) {
      return MONTHS[month - 1];
    }

    getDayAriaLabel(date: NgbDateStruct): string {
      return `${date.day}-${date.month}-${date.year}`;
    }
}

@Component({
  selector: 'app-higri-date',
  templateUrl: './higri-date.component.html',
  styleUrls: ['./higri-date.component.css'],
  providers: [
    {provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura},
    {provide: NgbDatepickerI18n, useClass: IslamicI18n}
  ]
})

export class HigriDateComponent implements OnInit {
  
  @Output() onDatePicked: EventEmitter<NgbDate> = new EventEmitter<NgbDate>();
  @Input() myDate;
  @Input() higriDisabled;

  model: NgbDateStruct;


  ngOnInit() {
    this.model = this.myDate;
    console.log('moooodeeeeeeeeel' , this.myDate);
  }



  constructor(private calendar: NgbCalendar) {}
 
 
 

  onSearchChange(date) {
    this.onDatePicked.emit(date);
  }
 
 
  onGetDateVal(event) {
    alert('hello');
    console.log(event);
  }

}