<div class="row">
  <div class="col-12 col-xl-7 mb-4">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="mb-4">{{ 'form-components.date-picker' | translate }}</h5>
        <form [formGroup]="form" class="form-group mb-3">
          <label>{{ 'form-components.date' | translate }}</label>
          <input type="text" placeholder="Datepicker" class="form-control" formControlName="basicDate"
          bsDatepicker [container]="'html'" [bsConfig]="{ adaptivePosition: true, dateInputFormat: 'DD-MM-YYYY' }">
        </form>
        <div class="form-group mb-3">
          <label>{{ 'form-components.date-range' | translate }}</label>
          <input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [container]="'html'" [(ngModel)]="bsRangeValue">
        </div>
        <div class="form-group mb-3">
          <label>{{ 'form-components.disabled-dates' | translate }}</label>
          <input class="form-control" [container]="'html'" placeholder="Datepicker" bsDatepicker [daysDisabled]="[6,0]">
        </div>
        <div class="form-group mb-3">
          <label>{{ 'form-components.locale' | translate }}</label>
          <input class="form-control" [container]="'html'" placeholder="Datepicker" bsDatepicker #dp="bsDatepicker">
        </div>

      </div>
    </div>
  </div>
  <div class="col-12 col-xl-5 mb-4">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="mb-4">{{ 'form-components.embedded' | translate }}</h5>
        <div class="form-group">
          <bs-datepicker-inline class="datepicker-inline" [bsValue]="bsInlineValue" [bsConfig]="{showWeekNumbers: false}"></bs-datepicker-inline>
        </div>
      </div>
    </div>
  </div>
</div>

