jmalmdatepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.html

ionic5-datepicker inspired by rajeshwar patlolla ionic1 datepicker

<ion-header>
  <ion-toolbar (click)="changeToDateList()">
    <ion-title>
      <h1 *ngIf="mainObj?.titleLabel">{{mainObj?.titleLabel}}</h1>
      {{selectedDateString}}
    </ion-title>
  </ion-toolbar>
</ion-header>


<ion-content [scrollY]="!isMonthYearSelectorOpen" forceOverscroll="false" class="ionic_datepicker_modal_content ion-no-padding">
  <ion-grid class="dp-month-year-container ion-no-padding" [ngClass]="isMonthYearSelectorOpen ? 'dp-virual-scroller-hide' : 'dp-virual-scroller-show'">
    <ion-row>
      <ion-col size="1.5" class="dp-left-right-arrow" (click)="prevMonth()">
        <ion-button [ngClass]="{'pointer_events_none':((firstDayEpoch - 86400000) < fromDate)}">
          <ion-icon *ngIf="!mainObj?.arrowNextPrev?.prevArrowSrc" [name]="icon.iconArrowBack"></ion-icon>
          <ion-icon *ngIf="mainObj?.arrowNextPrev?.prevArrowSrc" src="{{mainObj?.arrowNextPrev?.prevArrowSrc}}"></ion-icon>
        </ion-button>
      </ion-col>
      <ion-col size="9">
        <ion-grid>
          <ion-row>
            <ion-col class="dp-select-month-year ion-no-padding" size="5.5" (click)="selectMonthYear(true)">
              <ion-button class="dp-buttons">
                {{ data.currentMonth }}
                <ion-icon [name]="icon.iconArrowDropdown" class="dp-down-arrow"></ion-icon>
              </ion-button>
            </ion-col>
            <ion-col size="1"></ion-col>
            <ion-col class="dp-select-month-year ion-no-padding" size="5.5" (click)="selectMonthYear(false)">
              <ion-button class="dp-buttons">
                {{ data.currentYear }}
                <ion-icon [name]="icon.iconArrowDropdown" class="dp-down-arrow"></ion-icon>
              </ion-button>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
      <ion-col size="1.5" class="dp-left-right-arrow" (click)="nextMonth()">
        <ion-button [ngClass]="{'pointer_events_none':((lastDayEpoch + 86400000)> toDate)}">
          <ion-icon *ngIf="!mainObj?.arrowNextPrev?.nextArrowSrc" [name]="icon.iconArrowForward"></ion-icon>
          <ion-icon *ngIf="mainObj?.arrowNextPrev?.nextArrowSrc" src="{{mainObj?.arrowNextPrev?.nextArrowSrc}}"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-grid class="dp-weeks-container" *ngIf="daysList" [ngClass]="isMonthYearSelectorOpen ? 'dp-virual-scroller-hide' : 'dp-virual-scroller-show'">
          <ion-row class=" dp-weeks-name">
            <ion-col *ngFor="let weekName of mainObj?.weeksList; let i = index">
              <!-- <div class="weeks">{{weekName}} {{i}}</div> -->
              <div class="weeks" *ngIf="mainObj?.mondayFirst"
              [style.color]="mainObj?.isSundayHighlighted && i === 6 ? mainObj?.isSundayHighlighted.fontColor : ''">
               {{weekName}}</div>
              <div class="weeks" *ngIf="!mainObj?.mondayFirst"
              [style.color]="mainObj?.isSundayHighlighted && i === 0 ? mainObj?.isSundayHighlighted.fontColor : ''">
               {{weekName}}</div>
            </ion-col>
          </ion-row>
          <ion-row *ngFor="let row of rows;" class="dp-days-list">
            <ion-col *ngFor="let col of cols; let i = index ;" (click)="dateSelected(daysList[row + i])"
              [style.background-color]="(daysList[row + i]?.color) ? (daysList[row + i]?.color) : ''"
              [style.border-radius]="(daysList[row + i]?.color) ? '4px' : ''" [ngClass]="{
                'dp-selecteddate': (daysList[row + i]?.epoch === selctedDateEpoch),
                'dp-today' : (daysList[row + i]?.epoch == today),
                'disabled' : (daysList[row + i]?.disabled)}">
              <div class="days" [style.color]="(daysList[row + i]?.fontColor) ? (daysList[row + i]?.fontColor) : ''">
                {{daysList[row + col]?.date}}
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-list class="dp-month-year-scroll-container" [ngClass]="isMonthYearSelectorOpen ? 'dp-virual-scroller-show' : 'dp-virual-scroller-hide'">
    <ion-item *ngFor="let monthYear of scrollingMonthOrYearArray;let i=index;" id="{{i +'list'}}" (click)="onChangeMonthYear(monthYear)">
      <ion-label [ngClass]="selectedYearOrMonth === monthYear ? 'dp-selected' : ''">{{ monthYear }}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer *ngIf="mainObj?.closeButton || mainObj?.showTodayButton || !mainObj?.closeOnSelect">
  <ion-toolbar>
    <ion-grid class="ion-no-padding">
      <ion-row class="ion-no-padding" [ngClass]="mainObj?.btnCloseSetInReverse ? 'dp-btn-set-close-in-reverse' : ''">
        <ion-col *ngIf="mainObj?.closeLabel" class="ion-no-padding">
          <ion-button class="ion-button" expand="{{mainObj?.btnProperties?.expand}}" fill="{{mainObj?.btnProperties?.fill}}"
            size="{{mainObj?.btnProperties?.size}}" color="{{mainObj?.btnProperties?.color}}" disabled="{{mainObj?.btnProperties?.disabled}}"
            strong="{{mainObj?.btnProperties?.strong}}" (click)="closeIonicDatePickerModal()">
            {{mainObj?.closeLabel}}
          </ion-button>
        </ion-col>
        <ion-col class="ion-no-padding" *ngIf="mainObj?.showTodayButton">
          <ion-button class="ion-button" expand="{{mainObj?.btnProperties?.expand}}" fill="{{mainObj?.btnProperties?.fill}}"
            size="{{mainObj?.btnProperties?.size}}" color="{{mainObj?.btnProperties?.color}}" disabled="{{mainObj?.btnProperties?.disabled}}"
            strong="{{mainObj?.btnProperties?.strong}}" (click)="setIonicDatePickerTodayDate()">
            {{mainObj?.todayLabel}}
          </ion-button>
        </ion-col>
        <ion-col class="ion-no-padding" *ngIf="!mainObj?.closeOnSelect">
          <ion-button class="ion-button" expand="{{mainObj?.btnProperties?.expand}}"
            fill="{{mainObj?.btnProperties?.fill}}" size="{{mainObj?.btnProperties?.size}}"
            color="{{mainObj?.btnProperties?.color}}"
            disabled="{{mainObj?.btnProperties?.disabled || !isSelectedDateFound}}"
            strong="{{mainObj?.btnProperties?.strong}}" (click)="setIonicDatePickerDate()">
            {{mainObj?.setLabel}}
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-footer>