Skip to content

Commit

Permalink
feat(module:datepicker): support [nzShowTime]
Browse files Browse the repository at this point in the history
  • Loading branch information
@hsuanxyz
hsuanxyz committed Dec 12, 2017
1 parent 24862dc commit d5bad61
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 11 deletions.
118 changes: 108 additions & 10 deletions src/components/datepicker/nz-rangepicker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { DayInterface, MonthInterface, RangePart } from '../calendar/nz-calendar
import { dropDownAnimation } from '../core/animation/dropdown-animations';
import { DEFAULT_DATEPICKER_POSITIONS } from '../core/overlay/overlay-position-map';
import { NzLocaleService } from '../locale/index';
import { NzTimePickerInnerComponent } from '../time-picker/nz-timepicker-inner.component';
import { toBoolean } from '../util/convert';

@Component({
Expand Down Expand Up @@ -57,13 +58,36 @@ import { toBoolean } from '../util/convert';
[class.top]="_dropDownPosition === 'top'"
[class.bottom]="_dropDownPosition === 'bottom'"
[@dropDownAnimation]="_dropDownPosition">
<div class="ant-calendar ant-calendar-range" tabindex="0">
<div class="ant-calendar-range-with-ranges ant-calendar ant-calendar-range"
[class.ant-calendar-time]="nzShowTime"
[class.ant-calendar-show-time-picker]="_mode[_part.Start] === 'time'"
tabindex="0">
<div class="ant-calendar-panel">
<div class="ant-calendar-date-panel">
<ng-container *ngTemplateOutlet="calendarRangePart; context: { part: _part.Start }"></ng-container>
<span class="ant-calendar-range-middle">~</span>
<ng-container *ngTemplateOutlet="calendarRangePart; context: { part: _part.End }"></ng-container>
</div>
<div class="ant-calendar-footer ant-calendar-range-bottom ant-calendar-footer-show-ok">
<span class="ant-calendar-footer-btn">
<a class="ant-calendar-time-picker-btn"
[class.ant-calendar-time-picker-btn-disabled]="!_isValidRange()"
(click)="_changeTimeView($event)"
*ngIf="_mode[_part.Start] !== 'time' && nzShowTime">
{{ 'DateTime.chooseTime' | nzTranslate }}
</a>
<a class="ant-calendar-time-picker-btn"
(click)="_changeYearView($event)"
*ngIf="_mode[_part.Start] === 'time' && nzShowTime">
{{ 'DateTime.chooseDate' | nzTranslate }}
</a>
<a class="ant-calendar-ok-btn"
[class.ant-calendar-ok-btn-disabled]="!_isValidRange()"
*ngIf="nzShowTime" (click)="_closeCalendar()">
{{ 'DateTime.ok' | nzTranslate }}
</a>
</span>
</div>
</div>
</div>
</div>
Expand All @@ -85,9 +109,8 @@ import { toBoolean } from '../util/convert';
[value]="_value[type] | nzDate: nzFormat">
</div>
</div>
<div class="ant-calendar-date-panel">
<div class="ant-calendar-header">
<div style="position: relative;">
<div style="position: relative;" *ngIf="_mode[type] !== 'time'">
<a class="ant-calendar-prev-year-btn"
*ngIf="type !== _part.End || _showBtn(type)"
title="{{ 'DateTime.prevYear' | nzTranslate }}"
Expand Down Expand Up @@ -117,8 +140,26 @@ import { toBoolean } from '../util/convert';
title="{{ 'DateTime.nextYear' | nzTranslate }}"
(click)="_nextYear(type)"></a>
</div>
<div style="position: relative;" *ngIf="_mode[type] === 'time'">
<span class="ant-calendar-my-select">
<a class="ant-calendar-year-select" title="Choose a month">{{ 'DateTime.nYear' | nzTranslate: {num: _selectedYear[type]} }}</a>
<a class="ant-calendar-month-select" title="Choose a month">{{ 'DateTime.nMonth' | nzTranslate: {num: _showMonth[type] + 1} }}</a>
<a class="ant-calendar-day-select">{{ 'DateTime.nDay' | nzTranslate: {num: _selectedDate[type]} }}</a>
</span>
</div>
</div>
<div class="ant-calendar-body">
<div class="ant-calendar-time-picker-body" *ngIf="nzShowTime && _mode[type] === 'time'">
<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[type]" (ngModelChange)="_changeTime($event, type)"></nz-timepicker-inner>
</div>
<div class="ant-calendar-calendar-body">
<nz-calendar
(nzClickMonth)="_clickMonth($event, type)"
(nzClickDay)="_clickDay($event, type)"
Expand All @@ -134,7 +175,6 @@ import { toBoolean } from '../util/convert';
[nzDatePicker]="true">
</nz-calendar>
</div>
</div>
<div class="ant-calendar-year-panel" *ngIf="_mode[type]=='decade'">
<div>
<div class="ant-calendar-year-panel-header">
Expand Down Expand Up @@ -189,14 +229,19 @@ import { toBoolean } from '../util/convert';
]
})
export class NzRangePickerComponent implements ControlValueAccessor, OnInit {
_part = RangePart; // use for template
private _disabled = false;
private _showTime: Partial<NzTimePickerInnerComponent> = null;

_part = RangePart; // use for template
_el;
_value: Date[];
_open;
_disabledDate: (value: Date) => boolean;
_disabledDatePart: [(value: Date) => boolean, (value: Date) => boolean] = [null, null];
_mode = ['year', 'year'];
_selectedMonth: number[] = [];
_selectedYear: number[] = [];
_selectedDate: number[] = [];
_showMonth = [moment().month(), moment().add(1, 'month').month()];
_showYear = [moment().year(), moment().year()];
_yearPanel: string[][] = [];
Expand All @@ -211,6 +256,7 @@ export class NzRangePickerComponent implements ControlValueAccessor, OnInit {
@Input() nzFormat = 'YYYY-MM-DD';
@Input() nzAllowClear = true;
@Input() nzPlaceholder: string[] = [this._locale.translate('DateTime.chooseStartDatePlease'), this._locale.translate('DateTime.chooseEndDatePlease')];
@ViewChild(NzTimePickerInnerComponent) timePickerInner: NzTimePickerInnerComponent;

// avoid reference types
get _defaultPickerValue(): Date[] {
Expand All @@ -223,6 +269,19 @@ export class NzRangePickerComponent implements ControlValueAccessor, OnInit {
&& !this.nzDisabled && this.nzAllowClear;
}

@Input()
set nzShowTime(value: Partial<NzTimePickerInnerComponent>) {
if (typeof value === 'string' || typeof value === 'boolean') {
this._showTime = toBoolean(value) ? {} : null;
} else {
this._showTime = value;
}
}

get nzShowTime(): Partial<NzTimePickerInnerComponent> {
return this._showTime;
}

@Input()
set nzDisabled(value: boolean) {
this._disabled = toBoolean(value);
Expand Down Expand Up @@ -293,6 +352,7 @@ export class NzRangePickerComponent implements ControlValueAccessor, OnInit {
if (this.nzDisabled) {
return;
}
this._mode = ['year', 'year'];
this._open = true;
this._setTriggerWidth();
this._initShow();
Expand Down Expand Up @@ -327,9 +387,17 @@ export class NzRangePickerComponent implements ControlValueAccessor, OnInit {
return moment(this._value[part]).isValid();
}

_isValidRange(): boolean {
return this._isValid(RangePart.Start) && this._isValid(RangePart.End);
}

_changeTime($event: Date, part: RangePart): void {
this._value[part] = $event;
}

_clickDay(day: DayInterface, part: RangePart): void {

if (this._isValid(RangePart.Start) && this._isValid(RangePart.End)) {
if (this._isValidRange()) {
this._value = this._defaultPickerValue;
this._value[part] = day.date.toDate();
this.setRangeValue();
Expand All @@ -347,10 +415,13 @@ export class NzRangePickerComponent implements ControlValueAccessor, OnInit {
}

// the result depends the before step
if (this._isValid(RangePart.Start) && this._isValid(RangePart.End)) {
if (this._isValidRange()) {
this.setRangeValue();
this._closeCalendar();
return;
if (!this.nzShowTime) {
this._closeCalendar();
return;
}
this._initShow();
}

this.setRangeValue();
Expand All @@ -363,6 +434,22 @@ export class NzRangePickerComponent implements ControlValueAccessor, OnInit {
this.adjustShowMonth();
}

_changeTimeView($event: MouseEvent): void {
$event.stopPropagation();
this._mode[RangePart.End] = 'time';
this._mode[RangePart.Start] = 'time';
this.setSelectedValue();
setTimeout(_ => {
this.timePickerInner._initPosition();
});
}

_changeYearView($event: MouseEvent): void {
$event.stopPropagation();
this._mode[RangePart.End] = 'year';
this._mode[RangePart.Start] = 'year';
}

_showBtn(part: RangePart): boolean {
if (this._mode[part] === 'month') {
return true;
Expand Down Expand Up @@ -460,6 +547,17 @@ export class NzRangePickerComponent implements ControlValueAccessor, OnInit {
}
}

setSelectedValue(): void {
const start = moment(this._value[RangePart.Start]);
const end = moment(this._value[RangePart.End]);
this._selectedMonth[RangePart.Start] = start.month();
this._selectedYear[RangePart.Start] = start.year();
this._selectedDate[RangePart.Start] = start.date();
this._selectedMonth[RangePart.End] = end.month();
this._selectedYear[RangePart.End] = end.year();
this._selectedDate[RangePart.End] = end.date();
}

writeValue(value: Date[]): void {
this._updateValue(value);
}
Expand Down
4 changes: 4 additions & 0 deletions src/components/datepicker/style/patch.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,7 @@ nz-datepicker {
box-shadow: none;
}
}

.@{calendar-prefix-cls}-time-picker-body {
height: 247px;
}
5 changes: 4 additions & 1 deletion src/showcase/nz-demo-datepicker/nz-demo-datepicker-time.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,13 @@ import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-datepicker-time',
template: `
<nz-datepicker [(ngModel)]="_date" nzShowTime [nzPlaceHolder]="'Select date'" [nzFormat]="'YYYY-MM-DD HH:mm:ss'"></nz-datepicker>`,
<nz-datepicker [(ngModel)]="_date" nzShowTime [nzPlaceHolder]="'Select date'" [nzFormat]="'YYYY-MM-DD HH:mm:ss'"></nz-datepicker>
<nz-rangepicker [(ngModel)]="_dateRange" nzShowTime [nzFormat]="'YYYY-MM-DD HH:mm:ss'"></nz-rangepicker>
`,
styles : []
})

export class NzDemoDatePickerTimeComponent {
_date = null;
_dateRange = [null, null];
}
6 changes: 6 additions & 0 deletions src/showcase/nz-demo-datepicker/nz-demo-datepicker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,12 @@ <h3>共同的 API</h3>
<td>boolean</td>
<td>true</td>
</tr>
<tr>
<td>nzShowTime</td>
<td>时间选项,参见 nz-timepicker 参数</td>
<td>boolean | NzTimePickerInnerComponent</td>
<td>null</td>
</tr>
</tbody>
</table>
<h3>nz-datepicker</h3>
Expand Down

0 comments on commit d5bad61

Please sign in to comment.