ng-gregorian-hijri-datepicker/src/lib/hijri-gregorian-datepicker/hijri-gregorian-datepicker.component.html

* 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 *

    <div class="form-group" provideParentForm>
      <label class="requiredInput" *ngIf="showLabel" for="input-birth-Date">{{ label }} </label>

      <div class="input-group">

        <input  class="form-control"
                  [placeholder]="placeHolder ? placeHolder : 'd/M/yyyy'"
                  [name]="label"
                  *ngIf="selectedDateType == DateType.Gregorian"
                  [(ngModel)]="selectedDate"
                  ngbDatepicker (click)="d.toggle()"
                  (dateSelect)="dateSelected()"
                  autocomplete="off"
                  [readonly]="readonly"
                  [minDate]="minGreg"
                  [maxDate]="maxGreg"
                  [required]="isRequired"
                  [disabled]="disabled"
                  [footerTemplate]="footerTemplate"
                  #d="ngbDatepicker">

          <ng-template #footerTemplate>
            <hr class="my-0">
            <button class="btn btn-secondary btn-sm m-2 float-right" type="button" (click)="close()">Close</button>
            <button class="btn btn-primary btn-sm m-2 float-left" type="button" (click)="clear()">Clear</button>
          </ng-template>

          <hijri-date-picker *ngIf="selectedDateType == DateType.Hijri"
                             [(selectedDate)]="selectedDate"
                             (selectedDateChange)="dateSelected()"
                             [readonly]="readonly"
                             [min]="minHijri" [max]="maxHijri"
                             style="position: relative;flex: 1 1 auto;width: 1%; min-width: 0;margin-bottom: 0;"
                             [name]="label"
                             [isRequired]="isRequired"
                             [placeHolder]="placeHolder"
                             [disabled]="disabled">
          </hijri-date-picker>

          <div class="input-group-append">
                  <button class="btn btn-sm {{selectedDateType == DateType.Hijri ? 'btn-info focus active' :  'btn-outline-info'}}" (click)="hijriClick()"  [disabled]="disabled" type="button">
                     {{hijriLabel ? hijriLabel : 'Hijri' }}
                  </button>
                  <button class="btn btn-sm {{selectedDateType == DateType.Gregorian ? 'btn-info focus active' :  'btn-outline-info'}}" (click)="gregClick()" [disabled]="disabled" type="button">
                      {{GregLabel ? GregLabel : 'Gregorian' }}
                  </button>
           </div>

      </div>
  </div>