Skip to content

Commit

Permalink
fix(module:datepicker): disable datepicker when user input (#738)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vthinkxie
vthinkxie authored Dec 14, 2017
1 parent 504fdc8 commit 84c0f23
Showing 1 changed file with 115 additions and 111 deletions.
226 changes: 115 additions & 111 deletions src/components/datepicker/nz-datepicker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ import { toBoolean } from '../util/convert';
dropDownAnimation
],
template : `
<span style="display: block"
(click)="_openCalendar()"
cdkOverlayOrigin
#origin="cdkOverlayOrigin"
#trigger>
<span style="display: block"
(click)="_openCalendar()"
cdkOverlayOrigin
#origin="cdkOverlayOrigin"
#trigger>
<input
nz-input
(blur)="onTouched()"
Expand All @@ -45,134 +45,134 @@ import { toBoolean } from '../util/convert';
</i>
<span class="ant-calendar-picker-icon"></span>
</span>
<ng-template
cdkConnectedOverlay
cdkConnectedOverlayHasBackdrop
[cdkConnectedOverlayPositions]="_positions"
[cdkConnectedOverlayOrigin]="origin"
(backdropClick)="_closeCalendar()"
(detach)="_closeCalendar()"
(positionChange)="onPositionChange($event)"
[cdkConnectedOverlayOpen]="_open"
>
<div class="ant-calendar-picker-container"
[class.top]="_dropDownPosition==='top'"
[class.bottom]="_dropDownPosition==='bottom'"
[@dropDownAnimation]="_dropDownPosition">
<div class="ant-calendar" tabindex="0" [class.ant-calendar-time]="nzShowTime">
<div class="ant-calendar-input-wrap">
<div class="ant-calendar-date-input-wrap">
<input class="ant-calendar-input"
[attr.placeholder]="nzPlaceHolder"
[value]="_value|nzDate:nzFormat"
#dateBox
(blur)="_blurInput(dateBox)">
<ng-template
cdkConnectedOverlay
cdkConnectedOverlayHasBackdrop
[cdkConnectedOverlayPositions]="_positions"
[cdkConnectedOverlayOrigin]="origin"
(backdropClick)="_closeCalendar()"
(detach)="_closeCalendar()"
(positionChange)="onPositionChange($event)"
[cdkConnectedOverlayOpen]="_open"
>
<div class="ant-calendar-picker-container"
[class.top]="_dropDownPosition==='top'"
[class.bottom]="_dropDownPosition==='bottom'"
[@dropDownAnimation]="_dropDownPosition">
<div class="ant-calendar" tabindex="0" [class.ant-calendar-time]="nzShowTime">
<div class="ant-calendar-input-wrap">
<div class="ant-calendar-date-input-wrap">
<input class="ant-calendar-input"
[attr.placeholder]="nzPlaceHolder"
[value]="_value|nzDate:nzFormat"
#dateBox
(blur)="_blurInput(dateBox)">
</div>
<a class="ant-calendar-clear-btn" title="{{ 'DateTime.clear' | nzTranslate }}"></a>
</div>
<a class="ant-calendar-clear-btn" title="{{ 'DateTime.clear' | nzTranslate }}"></a>
</div>
<div class="ant-calendar-date-panel">
<div class="ant-calendar-header">
<div style="position: relative;" *ngIf="_mode!='time'">
<a class="ant-calendar-prev-year-btn" title="{{ 'DateTime.prevYear' | nzTranslate }}" (click)="_preYear()"></a>
<a class="ant-calendar-prev-month-btn" title="{{ 'DateTime.prevMonth' | nzTranslate }}" (click)="_preMonth()"></a>
<span class="ant-calendar-ym-select">
<div class="ant-calendar-date-panel">
<div class="ant-calendar-header">
<div style="position: relative;" *ngIf="_mode!='time'">
<a class="ant-calendar-prev-year-btn" title="{{ 'DateTime.prevYear' | nzTranslate }}" (click)="_preYear()"></a>
<a class="ant-calendar-prev-month-btn" title="{{ 'DateTime.prevMonth' | nzTranslate }}" (click)="_preMonth()"></a>
<span class="ant-calendar-ym-select">
<a class="ant-calendar-month-select" title="{{ 'DateTime.chooseMonth' | nzTranslate }}" (click)="_changeMonthView()">{{ 'DateTime.nMonth' | nzTranslate: {num: _showMonth + 1} }}</a>
<a class="ant-calendar-year-select" title="{{ 'DateTime.chooseYear' | nzTranslate }}" (click)="_changeDecadeView($event)">{{ 'DateTime.nYear' | nzTranslate: {num: _showYear} }}</a>
</span>
<a class="ant-calendar-next-month-btn" title="{{ 'DateTime.nextMonth' | nzTranslate }}" (click)="_nextMonth()"></a>
<a class="ant-calendar-next-year-btn" title="{{ 'DateTime.nextYear' | nzTranslate }}" (click)="_nextYear()"></a>
</div>
<div style="position: relative;" *ngIf="_mode=='time'">
<a class="ant-calendar-next-month-btn" title="{{ 'DateTime.nextMonth' | nzTranslate }}" (click)="_nextMonth()"></a>
<a class="ant-calendar-next-year-btn" title="{{ 'DateTime.nextYear' | nzTranslate }}" (click)="_nextYear()"></a>
</div>
<div style="position: relative;" *ngIf="_mode=='time'">
<span class="ant-calendar-my-select">
<a class="ant-calendar-year-select" title="Choose a month">{{ 'DateTime.nYear' | nzTranslate: {num: _selectedYear} }}</a>
<a class="ant-calendar-month-select" title="Choose a month">{{ 'DateTime.nMonth' | nzTranslate: {num: _showMonth + 1} }}</a>
<a class="ant-calendar-day-select">{{ 'DateTime.nDay' | nzTranslate: {num: _selectedDate} }}</a>
</span>
</div>
<div class="ant-calendar-month-panel" *ngIf="_mode=='month'">
<div>
<div class="ant-calendar-month-panel-header">
<a class="ant-calendar-month-panel-prev-year-btn" title="{{ 'DateTime.prevYear' | nzTranslate }}" (click)="_preYear()"></a>
<a class="ant-calendar-month-panel-year-select" title="{{ 'DateTime.chooseYear' | nzTranslate }}" (click)="_changeDecadeView($event)">
<span class="ant-calendar-month-panel-year-select-content">{{ _showYear }}</span>
<span class="ant-calendar-month-panel-year-select-arrow">x</span>
</a>
<a class="ant-calendar-month-panel-next-year-btn" title="{{ 'DateTime.nextYear' | nzTranslate }}" (click)="_nextYear()"></a>
</div>
<div class="ant-calendar-month-panel-body">
<nz-calendar
[nzClearTime]="!nzShowTime"
[nzDisabledDate]="nzDisabledDate"
(nzClickDay)="_clickDay($event)"
[nzShowMonth]="_showMonth"
[nzShowYear]="_showYear"
[nzValue]="_value"
(nzClickMonth)="_clickMonth($event)"
[nzMode]="'month'"
[nzFullScreen]="false"
[nzShowHeader]="false"
nzDatePicker>
</nz-calendar>
</div>
</div>
</div>
<div class="ant-calendar-year-panel" *ngIf="_mode=='decade'">
<div>
<div class="ant-calendar-year-panel-header">
<a class="ant-calendar-year-panel-prev-decade-btn" title="{{ 'DateTime.prevDecade' | nzTranslate }}" (click)="_preDecade()"></a>
<a class="ant-calendar-year-panel-decade-select" title="{{ 'DateTime.chooseDecade' | nzTranslate }}">
<span class="ant-calendar-year-panel-decade-select-content">{{ _startDecade }}-{{ _startDecade + 9 }}</span>
<span class="ant-calendar-year-panel-decade-select-arrow">x</span>
</a>
<a class="ant-calendar-year-panel-next-decade-btn" title="{{ 'DateTime.nextDecade' | nzTranslate }}" (click)="_nextDecade()"></a>
<div class="ant-calendar-month-panel" *ngIf="_mode=='month'">
<div>
<div class="ant-calendar-month-panel-header">
<a class="ant-calendar-month-panel-prev-year-btn" title="{{ 'DateTime.prevYear' | nzTranslate }}" (click)="_preYear()"></a>
<a class="ant-calendar-month-panel-year-select" title="{{ 'DateTime.chooseYear' | nzTranslate }}" (click)="_changeDecadeView($event)">
<span class="ant-calendar-month-panel-year-select-content">{{ _showYear }}</span>
<span class="ant-calendar-month-panel-year-select-arrow">x</span>
</a>
<a class="ant-calendar-month-panel-next-year-btn" title="{{ 'DateTime.nextYear' | nzTranslate }}" (click)="_nextYear()"></a>
</div>
<div class="ant-calendar-month-panel-body">
<nz-calendar
[nzClearTime]="!nzShowTime"
[nzDisabledDate]="nzDisabledDate"
(nzClickDay)="_clickDay($event)"
[nzShowMonth]="_showMonth"
[nzShowYear]="_showYear"
[nzValue]="_value"
(nzClickMonth)="_clickMonth($event)"
[nzMode]="'month'"
[nzFullScreen]="false"
[nzShowHeader]="false"
nzDatePicker>
</nz-calendar>
</div>
</div>
<div class="ant-calendar-year-panel-body">
<table class="ant-calendar-year-panel-table" cellspacing="0" role="grid">
<tbody class="ant-calendar-year-panel-tbody">
<tr *ngFor="let tr of _yearPanel">
<ng-template ngFor let-td [ngForOf]="tr">
<td class="ant-calendar-year-panel-cell ant-calendar-year-panel-last-decade-cell" *ngIf="td=='start'">
<a class="ant-calendar-year-panel-year" (click)="_preDecade()">{{ _startDecade - 1 }}</a>
</td>
<td *ngIf="(td!='start')&&(td!='end')" [attr.title]="_startDecade+td" class="ant-calendar-year-panel-cell" [ngClass]="{'ant-calendar-year-panel-selected-cell':(_startDecade+td==_showYear)}">
<a class="ant-calendar-year-panel-year" (click)="_setShowYear(_startDecade+td,$event)">{{ _startDecade + td }}</a>
</td>
<td class="ant-calendar-year-panel-cell ant-calendar-year-panel-next-decade-cell" *ngIf="td=='end'">
<a class="ant-calendar-year-panel-year" (click)="_nextDecade()">{{ _startDecade + 10 }}</a>
</td>
</ng-template>
</tr>
</tbody>
</table>
</div>
<div class="ant-calendar-year-panel" *ngIf="_mode=='decade'">
<div>
<div class="ant-calendar-year-panel-header">
<a class="ant-calendar-year-panel-prev-decade-btn" title="{{ 'DateTime.prevDecade' | nzTranslate }}" (click)="_preDecade()"></a>
<a class="ant-calendar-year-panel-decade-select" title="{{ 'DateTime.chooseDecade' | nzTranslate }}">
<span class="ant-calendar-year-panel-decade-select-content">{{ _startDecade }}-{{ _startDecade + 9 }}</span>
<span class="ant-calendar-year-panel-decade-select-arrow">x</span>
</a>
<a class="ant-calendar-year-panel-next-decade-btn" title="{{ 'DateTime.nextDecade' | nzTranslate }}" (click)="_nextDecade()"></a>
</div>
<div class="ant-calendar-year-panel-body">
<table class="ant-calendar-year-panel-table" cellspacing="0" role="grid">
<tbody class="ant-calendar-year-panel-tbody">
<tr *ngFor="let tr of _yearPanel">
<ng-template ngFor let-td [ngForOf]="tr">
<td class="ant-calendar-year-panel-cell ant-calendar-year-panel-last-decade-cell" *ngIf="td=='start'">
<a class="ant-calendar-year-panel-year" (click)="_preDecade()">{{ _startDecade - 1 }}</a>
</td>
<td *ngIf="(td!='start')&&(td!='end')" [attr.title]="_startDecade+td" class="ant-calendar-year-panel-cell" [ngClass]="{'ant-calendar-year-panel-selected-cell':(_startDecade+td==_showYear)}">
<a class="ant-calendar-year-panel-year" (click)="_setShowYear(_startDecade+td,$event)">{{ _startDecade + td }}</a>
</td>
<td class="ant-calendar-year-panel-cell ant-calendar-year-panel-next-decade-cell" *ngIf="td=='end'">
<a class="ant-calendar-year-panel-year" (click)="_nextDecade()">{{ _startDecade + 10 }}</a>
</td>
</ng-template>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<nz-timepicker-inner
[nzPlaceHolder]="nzShowTime && nzShowTime.nzPlaceHolder || ('DateTime.chooseTimePlease' | nzTranslate)"
[nzFormat]="nzShowTime&&nzShowTime.nzFormat||'HH:mm:ss'"
[nzDisabled]="nzShowTime&&nzShowTime.nzDisabled||false"
[nzDisabledHours]="nzShowTime&&nzShowTime.nzDisabledHours||null"
[nzDisabledMinutes]="nzShowTime&&nzShowTime.nzDisabledMinutes||null"
[nzDisabledSeconds]="nzShowTime&&nzShowTime.nzDisabledSeconds||null"
[nzHideDisabledOptions]="nzShowTime&&nzShowTime.nzHideDisabledOptions||false"
[ngModel]="_value" (ngModelChange)="_changeTime($event)"
*ngIf="nzShowTime&&(_mode == 'time')"></nz-timepicker-inner>
<div class="ant-calendar-calendar-body">
<nz-calendar [nzClearTime]="!nzShowTime" [nzDisabledDate]="nzDisabledDate" (nzClickDay)="_clickDay($event)" [nzShowMonth]="_showMonth" [nzShowYear]="_showYear" [nzValue]="_value" (nzClickMonth)="_clickMonth($event)" [nzMode]="'year'" [nzFullScreen]="false" [nzShowHeader]="false" nzDatePicker></nz-calendar>
</div>
<div class="ant-calendar-footer ant-calendar-footer-show-ok">
<nz-timepicker-inner
[nzPlaceHolder]="nzShowTime && nzShowTime.nzPlaceHolder || ('DateTime.chooseTimePlease' | nzTranslate)"
[nzFormat]="nzShowTime&&nzShowTime.nzFormat||'HH:mm:ss'"
[nzDisabled]="nzShowTime&&nzShowTime.nzDisabled||false"
[nzDisabledHours]="nzShowTime&&nzShowTime.nzDisabledHours||null"
[nzDisabledMinutes]="nzShowTime&&nzShowTime.nzDisabledMinutes||null"
[nzDisabledSeconds]="nzShowTime&&nzShowTime.nzDisabledSeconds||null"
[nzHideDisabledOptions]="nzShowTime&&nzShowTime.nzHideDisabledOptions||false"
[ngModel]="_value" (ngModelChange)="_changeTime($event)"
*ngIf="nzShowTime&&(_mode == 'time')"></nz-timepicker-inner>
<div class="ant-calendar-calendar-body">
<nz-calendar [nzClearTime]="!nzShowTime" [nzDisabledDate]="nzDisabledDate" (nzClickDay)="_clickDay($event)" [nzShowMonth]="_showMonth" [nzShowYear]="_showYear" [nzValue]="_value" (nzClickMonth)="_clickMonth($event)" [nzMode]="'year'" [nzFullScreen]="false" [nzShowHeader]="false" nzDatePicker></nz-calendar>
</div>
<div class="ant-calendar-footer ant-calendar-footer-show-ok">
<span class="ant-calendar-footer-btn">
<a class="ant-calendar-today-btn" [class.ant-calendar-today-btn-disabled]="_disabledToday" [attr.title]="_today|nzDate:nzFormat" (click)="_changeToToday()">{{ (nzShowTime ? 'DateTime.thisMoment' : 'DateTime.today') | nzTranslate }}</a>
<a class="ant-calendar-time-picker-btn" (click)="_changeTimeView($event)" *ngIf="(_mode != 'time')&&nzShowTime">{{ 'DateTime.chooseTime' | nzTranslate }}</a>
<a class="ant-calendar-time-picker-btn" (click)="_changeYearView($event)" *ngIf="(_mode == 'time')&&nzShowTime">{{ 'DateTime.chooseDate' | nzTranslate }}</a>
<a class="ant-calendar-ok-btn" *ngIf="nzShowTime" (click)="_closeCalendar()">{{ 'DateTime.ok' | nzTranslate }}</a>
</span>
</div>
</div>
</div>
</div>
</div>
</ng-template>`,
</ng-template>`,
providers : [
{
provide : NG_VALUE_ACCESSOR,
Expand All @@ -184,7 +184,7 @@ import { toBoolean } from '../util/convert';
'./style/index.less',
'./style/patch.less'
],
host: {
host : {
'[class.ant-calendar-picker]': 'true'
}
})
Expand Down Expand Up @@ -393,6 +393,7 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
return;
}
if (this.nzShowTime) {
this._updateValue(this._value);
this.onChange(this._value);
}
this._open = false;
Expand Down Expand Up @@ -468,6 +469,9 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
if (this._value === value) {
return;
}
if (this._disabledDate && this._disabledDate(value)) {
return;
}
this._value = value;
this._selectedMonth = moment(this.nzValue).month();
this._selectedYear = moment(this.nzValue).year();
Expand Down

0 comments on commit 84c0f23

Please sign in to comment.