kalidea/kaligraphi

<h1>Datepicker</h1>

<div class="example" [class.reverse]="reverse">
  <kal-form-field>
    <kal-datepicker [formControl]="control"
                    [closeOnPick]="closeOnPick"
                    [kalTheme]="themes" name="datepicker"
                    [minYear]="minYear"
                    [maxYear]="maxYear"
    ></kal-datepicker>
  </kal-form-field>
</div>

<div class="configurator">


  <kal-form-field>
    <kal-checkbox [(ngModel)]="reverse" label="reverse"></kal-checkbox>
  </kal-form-field>
  <kal-form-field>
    <kal-checkbox [(ngModel)]="closeOnPick" label="Close on Date pick"></kal-checkbox>
  </kal-form-field>
  <kal-form-field>
    <kal-checkbox [(ngModel)]="openOnClick" label="open datepicker on input click"></kal-checkbox>
  </kal-form-field>
  <kal-form-field>
    <kal-input [ngModel]="updateDate" (ngModelChange)="update($event)" [ngModelOptions]="{updateOn: 'blur'}"
               label="set date">
    </kal-input>
  </kal-form-field>

  <ng-container [formGroup]="dateValidatorForm">
    <kal-form-field>
      <kal-datepicker formControlName="minDate" label="Min date"></kal-datepicker>
    </kal-form-field>

    <kal-form-field>
      <kal-datepicker formControlName="maxDate" label="Max date"></kal-datepicker>
    </kal-form-field>
  </ng-container>

  <kal-button (click)="clearValidators()" kalTheme="secondary">Clear validators</kal-button>

  <kal-form-field>
    <kal-input [(ngModel)]="maxYear" label="Max year"></kal-input>
  </kal-form-field>

  <kal-form-field>
    <kal-input [(ngModel)]="minYear" label="Min year"></kal-input>
  </kal-form-field>

</div>