mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Kristiyan Kostadinov
85993d3a96
Fixes the datepicker toggle not reacting to changes in the disabled state of the associated datepicker and datepicker input.
108 lines
4.3 KiB
HTML
108 lines
4.3 KiB
HTML
<h2>Options</h2>
|
|
<p>
|
|
<md-checkbox [(ngModel)]="touch">Use touch UI</md-checkbox>
|
|
<md-checkbox [(ngModel)]="filterOdd">Filter odd months and dates</md-checkbox>
|
|
<md-checkbox [(ngModel)]="yearView">Start in year view</md-checkbox>
|
|
<md-checkbox [(ngModel)]="datepickerDisabled">Disable datepicker</md-checkbox>
|
|
<md-checkbox [(ngModel)]="inputDisabled">Disable input</md-checkbox>
|
|
</p>
|
|
<p>
|
|
<md-form-field>
|
|
<input mdInput [mdDatepicker]="minDatePicker" [(ngModel)]="minDate" placeholder="Min date"
|
|
[disabled]="inputDisabled">
|
|
<md-datepicker-toggle mdSuffix [for]="minDatePicker"></md-datepicker-toggle>
|
|
<md-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
|
|
</md-form-field>
|
|
<md-form-field>
|
|
<input mdInput [mdDatepicker]="maxDatePicker" [(ngModel)]="maxDate" placeholder="Max date"
|
|
[disabled]="inputDisabled">
|
|
<md-datepicker-toggle mdSuffix [for]="maxDatePicker"></md-datepicker-toggle>
|
|
<md-datepicker #maxDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
|
|
</md-form-field>
|
|
</p>
|
|
<p>
|
|
<md-form-field>
|
|
<input mdInput [mdDatepicker]="startAtPicker" [(ngModel)]="startAt" placeholder="Start at date"
|
|
[disabled]="inputDisabled">
|
|
<md-datepicker-toggle mdSuffix [for]="startAtPicker"></md-datepicker-toggle>
|
|
<md-datepicker #startAtPicker [touchUi]="touch" [disabled]="datepickerDisabled"></md-datepicker>
|
|
</md-form-field>
|
|
</p>
|
|
|
|
<h2>Result</h2>
|
|
|
|
<p>
|
|
<md-datepicker-toggle [for]="resultPicker"></md-datepicker-toggle>
|
|
<md-form-field>
|
|
<input mdInput
|
|
#resultPickerModel="ngModel"
|
|
[mdDatepicker]="resultPicker"
|
|
[(ngModel)]="date"
|
|
[min]="minDate"
|
|
[max]="maxDate"
|
|
[mdDatepickerFilter]="filterOdd ? dateFilter : null"
|
|
[disabled]="inputDisabled"
|
|
placeholder="Pick a date"
|
|
(dateInput)="onDateInput($event)"
|
|
(dateChange)="onDateChange($event)">
|
|
<md-datepicker
|
|
#resultPicker
|
|
[touchUi]="touch"
|
|
[disabled]="datepickerDisabled"
|
|
[startAt]="startAt"
|
|
[startView]="yearView ? 'year' : 'month'">
|
|
</md-datepicker>
|
|
<md-error *ngIf="resultPickerModel.hasError('mdDatepickerParse')">
|
|
"{{resultPickerModel.getError('mdDatepickerParse').text}}" is not a valid date!
|
|
</md-error>
|
|
<md-error *ngIf="resultPickerModel.hasError('mdDatepickerMin')">Too early!</md-error>
|
|
<md-error *ngIf="resultPickerModel.hasError('mdDatepickerMax')">Too late!</md-error>
|
|
<md-error *ngIf="resultPickerModel.hasError('mdDatepickerFilter')">Date unavailable!</md-error>
|
|
</md-form-field>
|
|
</p>
|
|
<p>Last input: {{lastDateInput}}</p>
|
|
<p>Last change: {{lastDateChange}}</p>
|
|
<br>
|
|
<p>
|
|
<input #resultPickerModel2
|
|
[mdDatepicker]="resultPicker2"
|
|
[(ngModel)]="date"
|
|
[min]="minDate"
|
|
[max]="maxDate"
|
|
[disabled]="inputDisabled"
|
|
[mdDatepickerFilter]="filterOdd ? dateFilter : null"
|
|
placeholder="Pick a date">
|
|
<md-datepicker-toggle [for]="resultPicker2"></md-datepicker-toggle>
|
|
<md-datepicker
|
|
#resultPicker2
|
|
[touchUi]="touch"
|
|
[disabled]="datepickerDisabled"
|
|
[startAt]="startAt"
|
|
[startView]="yearView ? 'year' : 'month'">
|
|
</md-datepicker>
|
|
</p>
|
|
|
|
<h2>Input disabled datepicker</h2>
|
|
<p>
|
|
<md-datepicker-toggle [for]="datePicker1"></md-datepicker-toggle>
|
|
<md-form-field>
|
|
<input mdInput [mdDatepicker]="datePicker1" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
|
|
[mdDatepickerFilter]="filterOdd ? dateFilter : null" disabled
|
|
placeholder="Input disabled">
|
|
<md-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt"
|
|
[startView]="yearView ? 'year' : 'month'"></md-datepicker>
|
|
</md-form-field>
|
|
</p>
|
|
|
|
<h2>Input disabled, datepicker popup enabled</h2>
|
|
<p>
|
|
<md-datepicker-toggle [for]="datePicker2"></md-datepicker-toggle>
|
|
<md-form-field>
|
|
<input mdInput disabled [mdDatepicker]="datePicker2" [(ngModel)]="date" [min]="minDate"
|
|
[max]="maxDate" [mdDatepickerFilter]="filterOdd ? dateFilter : null"
|
|
placeholder="Input disabled, datepicker enabled">
|
|
<md-datepicker #datePicker2 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
|
|
[startView]="yearView ? 'year' : 'month'"></md-datepicker>
|
|
</md-form-field>
|
|
</p>
|