<div class="input-group" #datePickerContainer>
  <input #inputBox nbInput fullWidth [id]="id" name='{{name}}' class='rbj-form-control {{inputClass}}'
    [disabled]="_disabled||showUnlockBtn" [mask]="maskExpression" placeholder='{{placeholder}}'
    [attr.maxlength]="maskExpression.length" [required]="_required" (blur)="onBlur()">

  <div class="input-group-append" *ngIf="!(_disabled||showUnlockBtn)" nbTooltip='Open Calendar' nbTooltipTrigger='hover'
    nbTooltipPlacement='top' nbTooltipStatus='primary'>
    <button #calendarBtn nbButton hero type="button" size="small" (click)="toggleCalendar()" class="editBtn">
      <nb-icon pack="eva" icon="calendar-outline"></nb-icon>
    </button>
  </div>

  <div class="input-group-append" *ngIf="showUnlockBtn">
    <button #dropButton nbButton hero type="button" class="editBtn" size="small" (click)="unlockField()">
      <nb-icon pack="eva" icon="edit-outline"></nb-icon>
    </button>
  </div>

  <div></div>
</div>
<!-- <nb-datepicker #datePicker [date]="value" (dateChange)="pickDate($event)" [min]="min" [max]="max"></nb-datepicker> -->