systelab-components/html/datepicker-time.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.

<div class="d-flex">
  @if (showCalendar || withIntegratedTime) {
    <systelab-datepicker
      [(currentDate)]="currentDate"
      (currentDateChange)="currentDateChange.emit($event)"
      [disabled]="disabled"
      [error]="error"
      [markPreviousAfterDate]="markPreviousAfterDate"
      [required]="required"
      [inputExpandHeight]="inputExpandHeight"
      [inputFontSize]="inputFontSize"
      [showTodayButton]="showTodayButton"
      [tabindex]="tabindex"
      [maxDate]="maxDate"
      [minDate]="minDate"
      [warnDaysAfter]="warnDaysAfter"
      [warnDaysBefore]="warnDaysBefore"
      [autofocus]="autofocus"
      [onlyTime]="!showCalendar"
      [withIntegratedTime]="withIntegratedTime"
      [inline]="inline"
      [showOtherMonths]="showOtherMonths"
    [selectOtherMonths]="selectOtherMonths"></systelab-datepicker>
  }

  @if (!withIntegratedTime) {
    <systelab-spinner class="d-flex h-100" id="hours"
      [spinValues]="touchSpinHourValues"
      [fillUnitsWithZero]="true"
      [(value)]="touchSpinHourValues.value"
      [disabled]="disabled"
      [error]="error"
      [tabindex]="tabindex"
    (valueChange)="currentHoursChanged($event)"></systelab-spinner>
    <label class="mx-1 my-0" [class.text-danger]="error">:</label>
    <systelab-spinner class="d-flex h-100" id="minutes"
      [spinValues]="touchSpinMinutesValues"
      [fillUnitsWithZero]="true"
      [tabindex]="tabindex"
      [(value)]="touchSpinMinutesValues.value"
      [disabled]="disabled"
      [error]="error"
    (valueChange)="currentMinutesChanged($event)"></systelab-spinner>
  }
</div>