<div class="input-group" #datePickerContainer [ngClass]="{'d-none': showingMobileInput}">
  <input #inputBox nbInput fullWidth [id]="id" name='{{name}}' class='rbj-form-control {{inputClass}}'
    [disabled]="_disabled||showUnlockBtn" (keydown)="preventIllegalsInput($event)" (keyup)="applyMask($event)"
    placeholder='{{placeholder}}' [attr.maxlength]="maskExpression.length" (focusout)="focusout()"
    [required]="_required" (blur)="onTouched()">

  <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>
<input #nativeDateInput type="date" name="{{name}}" id="{{id}}" nbInput fullWidth
  (change)="value=$event.target.valueAsDate" [ngClass]="{'d-none': !showingMobileInput}">
<!-- <nb-datepicker #datePicker [date]="value" (dateChange)="pickDate($event)" [min]="min" [max]="max"></nb-datepicker> -->