Directive Component

Ng2 DateTime Picker Test

min date, max date, disabled dates

date2: 2017-01-28
<input
          [(ngModel)]="date2" 
          ngui-datetime-picker
          [disabled-dates]="date2DisabledDates"
          [min-date]="date2MinDate"
          [max-date]="date2MaxDate"
          [show-close-layer]="true"
          [show-week-numbers]="true"
          [is-draggable]="false"
          date-only="true"/>
        date2: {{date2}}
        <button id="set-date" (click)="date2 = date2New">Set 2017-12-31</button>
      

time only

<input [(ngModel)]="date3"
          ngui-datetime-picker 
          date-format="DD-MM-YYYY hh:mm"
          time-only="true"
          minute-step="5"
          (popupClosed)="onDatetimePickerClosed()"
          [close-on-select]="false" />
      

with timezone

dateWithTimezone:
<input 
          [(ngModel)]="date4" 
          ngui-datetime-picker
          [date-format]="date4TimezoneFormat" />
          dateWithTimezone: {{dateWithTimezone}}
        <br/>
      

Reactive form

myForm.controls.date.value: 2016-02-15
myForm.value: { "date": "2016-02-15" }
myForm.dirty: false
myForm.controls.date.dirty: false
2015-06-30 2015-07-19 2015-12-31
<form [formGroup]="myForm">
            <input 
              required
              formControlName="date" 
              ngui-datetime-picker
              [close-on-select]="false"/>
        </form>
        myForm.controls.date.value: {{myForm.controls.date.value}}
        <br/>myForm.value: {{myForm.value | json}}
        <br/>myForm.dirty: {{myForm.dirty}}
        <br/>myForm.controls.date.dirty: {{myForm.controls.date.dirty}}
        <br/>
        <a href="javascript:void()" 
          (click)="myForm.controls.date.patchValue('2015-06-30')">
          2015-06-30
        </a>
        <a href="javascript:void()"
          (click)="myForm.controls.date.patchValue('2015-07-19')">
          2015-07-19
        </a>
        <a href="javascript:void()"
          (click)="myForm.controls.date.patchValue('2015-12-31')">
          2015-12-31
        </a>
      

Material Design