systelab-components/html/datepicker.component.html

systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.

<p-calendar #calendar [(ngModel)]="currentDate" [showIcon]="false"
  [dateFormat]="language.dateFormatValue"
  [firstDayOfWeek]="language.firstDayOfWeek"
  (onFocus)="saveEventOnFocus($event)"
  (onBlur)="changeDate()"
  (onSelect)="selectDate()"
  (onInput)="onInput($event)"
  [showOtherMonths]="showOtherMonths"
  [selectOtherMonths]="selectOtherMonths"
  [minDate]="minDate"
  [focusTrap]="false"
  [maxDate]="maxDate"
  [inline]="inline"
  [required]="required"
  [disabled]="disabled"
  [readonlyInput]="isTablet"
  [style.font-size.px]="inputFontSize"
  [showTime]="withIntegratedTime"
  [timeOnly]="onlyTime"
  [showTransitionOptions]="'1ms linear'"
  [hideTransitionOptions]="'1ms linear'"
  appendTo="body"
  [tabindex]="tabindex"
  [ngClass]="{'date-error': formatError || error || (required && !currentDate), 'is-disabled': disabled, 'warning-date': tooFarDate || previousAfterDate, 'input-expand-height':inputExpandHeight}">
  @if (!onlyTime) {
    <ng-template pTemplate="header">
      <div id="{{datepickerId}}" class="slab-datepicker-header">
        <a id="previousYear" class="icon-angle-double-left slab-icon-medium" (click)="prevYear()"></a>
        <a id="previousMonth" class="icon-angle-left slab-icon-medium" (click)="prevMonth()"></a>
        <a id="nextYear" class="icon-angle-double-right slab-icon-medium" (click)="nextYear()"></a>
        <a id="nextMonth" class="icon-angle-right slab-icon-medium" (click)="nextMonth()"></a>
        <div class="p-datepicker-title d-flex align-items-center justify-content-center">
          <span class="p-datepicker-month">{{ language.translations.monthNames[currentCalendar.currentMonth] }}&nbsp;</span>
          <span class="p-datepicker-year">{{ currentCalendar.currentYear }}</span>
        </div>
      </div>
    </ng-template>
  }
  <ng-template pTemplate="footer">
    @if (!inline) {
      <div class="p-3 d-flex border-top">
        @if (showTodayButton) {
          <systelab-button id="today" size="small" class="mr-auto"
          (click)="setTodayDate()">{{ 'COMMON_TODAY' | translate | async }}</systelab-button>
        }
        <systelab-button id="clear" size="small" type="danger" class="ml-auto"
        (click)="clearDate($event)">{{ 'COMMON_CLEAR' | translate | async }}</systelab-button>
      </div>
    }
  </ng-template>
</p-calendar>