<div class="calendar">
    <label class="label--filter">{{ label | translate }}</label>

    <tooltip *ngIf="error">{{ error | translate }}</tooltip>

    <div class="calendar-controls-container" [ngClass]="{ 'has-value': dateStr, 'error-value': error }">
        <input
            #calendar_input_field
            class="input--filter input--calendar"
            [(ngModel)]="dateStr"
            type="text"
            (click)="openCalendar($event)"
            (keyup)="inputKeyup()"
            pInputText
            autocomplete="off"
            placeholder="{{ placeholder | translate }}"
        />

        <p-calendar
            #calendar
            class="calendar-control-hidden"
            [(ngModel)]="value"
            (onSelect)="onSelect($event)"
            dateFormat="{{ 'SHARED.DATE_FORMAT' | translate }}"
            [selectOtherMonths]="true"
            [locale]="localizationService.calendarTranslate"
            [disabledDates]="disabledDates"
            [minDate]="minDate"
            [maxDate]="maxDate"
            selectionMode="range"
        >
        </p-calendar>

        <button *ngIf="value" pButton label=" " class="button-clear" (click)="clearInput()"></button>
    </div>
</div>
