Skip to content

Commit

Permalink
feat(module:date-picker): refactoring and add new feature of year-picker
Browse files Browse the repository at this point in the history
close #416
  • Loading branch information
wilsoncook committed Jul 31, 2018
1 parent 8e7a6cb commit 8f6c71d
Show file tree
Hide file tree
Showing 10 changed files with 578 additions and 76 deletions.
10 changes: 8 additions & 2 deletions components/date-picker/date-picker.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import { LibPackerModule } from './lib/lib-packer.module';

import { NzDatePickerComponent } from './date-picker.component';
import { DateRangePickerComponent } from './date-range-picker.component';
import { HeaderPickerComponent } from './header-picker.component';
import { NzMonthPickerComponent } from './month-picker.component';
import { NzPickerComponent } from './picker.component';
import { NzRangePickerComponent } from './range-picker.component';
import { NzWeekPickerComponent } from './week-picker.component';
import { NzYearPickerComponent } from './year-picker.component';

@NgModule({
imports: [
Expand All @@ -22,15 +24,19 @@ import { NzWeekPickerComponent } from './week-picker.component';
NzDatePickerComponent,
NzRangePickerComponent,
NzMonthPickerComponent,
NzYearPickerComponent,
NzWeekPickerComponent
],
declarations: [
HeaderPickerComponent,
DateRangePickerComponent,
NzPickerComponent,

NzDatePickerComponent,
NzMonthPickerComponent,
NzYearPickerComponent,
NzWeekPickerComponent,
NzRangePickerComponent,
NzPickerComponent
NzRangePickerComponent
],
providers: []
})
Expand Down
4 changes: 3 additions & 1 deletion components/date-picker/demo/basic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,16 @@ import { en_US, zh_CN, NzI18nService } from 'ng-zorro-antd';
<br>
<nz-month-picker [(ngModel)]="date" (ngModelChange)="onChange($event)" nzPlaceHolder="Select month"></nz-month-picker>
<br>
<nz-year-picker [(ngModel)]="date" (ngModelChange)="onChange($event)" nzPlaceHolder="Select year"></nz-year-picker>
<br>
<nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
<br>
<nz-week-picker [(ngModel)]="date" (ngModelChange)="getWeek($event)" nzPlaceHolder="Select week"></nz-week-picker>
<br>
<button nz-button nzType="default" (click)="changeLanguage()">Switch language for all pickers</button>
`,
styles : [ `
nz-date-picker, nz-month-picker, nz-range-picker, nz-week-picker {
nz-date-picker, nz-month-picker, nz-year-picker, nz-range-picker, nz-week-picker {
margin: 0 8px 12px 0;
}
` ]
Expand Down
14 changes: 12 additions & 2 deletions components/date-picker/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
| `[nzAllowClear]` | Whether to show clear button | boolean | true |
| `[nzAutoFocus]` | get focus when component mounted | boolean | false |
| `[nzClassName]` | picker className | string | '' |
| `[nzDateRender]` | custom rendering function for date cells (Not support by nz-month-picker) | TemplateRef&lt;Date&gt; / string or (d: Date) => TemplateRef&lt;Date&gt; / string | - |
| `[nzDateRender]` | custom rendering function for date cells (Not support by month-picker/year-picker) | TemplateRef&lt;Date&gt; / string or (d: Date) => TemplateRef&lt;Date&gt; / string | - |
| `[nzDisabled]` | determine whether the nz-date-picker is disabled | boolean | false |
| `[nzDisabledDate]` | specify the date that cannot be selected | (current: Date) => boolean | - |
| `[nzDisabledDate]` | specify the date that cannot be selected (Not support by year-picker) | (current: Date) => boolean | - |
| `[nzLocale]` | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| `[nzOpen]` | open state of picker | boolean | - |
| `[nzPopupStyle]` | to customize the style of the popup calendar | object | {} |
Expand All @@ -64,6 +64,16 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
| `(nzOnOk)` | callback when click ok button | `EventEmitter<Date>` | - |
| `(ngModelChange)` | Date change callback | `EventEmitter<Date>` | - |

### nz-year-picker

| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| `[ngModel]` | Date | Date | - |
| `[nzFormat]` | to set the date format, refer to [DatePipe](https://angular.io/api/common/DatePipe) | string | "yyyy" |
| `[nzRenderExtraFooter]` | render extra footer in panel | TemplateRef / string or () => TemplateRef / string | - |
| `[nzPlaceHolder]` | placeholder of date input | string | - |
| `(ngModelChange)` | Date change callback | `EventEmitter<Date>` | - |

### nz-month-picker

| Property | Description | Type | Default |
Expand Down
14 changes: 12 additions & 2 deletions components/date-picker/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ registerLocaleData(zh);
| `[nzAllowClear]` | 是否显示清除按钮 | boolean | true |
| `[nzAutoFocus]` | 自动获取焦点 | boolean | false |
| `[nzClassName]` | 选择器 className | string | '' |
| `[nzDateRender]` | 自定义日期单元格的内容(nz-month-picker不支持) | TemplateRef&lt;Date&gt; / string or (d: Date) => TemplateRef&lt;Date&gt; / string | - |
| `[nzDateRender]` | 自定义日期单元格的内容(month-picker/year-picker不支持) | TemplateRef&lt;Date&gt; / string or (d: Date) => TemplateRef&lt;Date&gt; / string | - |
| `[nzDisabled]` | 禁用 | boolean | false |
| `[nzDisabledDate]` | 不可选择的日期 | (current: Date) => boolean ||
| `[nzDisabledDate]` | 不可选择的日期(year-picker不支持) | (current: Date) => boolean ||
| `[nzLocale]` | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| `[nzOpen]` | 控制弹层是否展开 | boolean | - |
| `[nzPopupStyle]` | 额外的弹出日历样式 | object | {} |
Expand All @@ -65,6 +65,16 @@ registerLocaleData(zh);
| `(nzOnOk)` | 点击确定按钮的回调 | `EventEmitter<Date>` | - |
| `(ngModelChange)` | 时间发生变化的回调 | `EventEmitter<Date>` ||

### nz-year-picker

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `[ngModel]` | 日期 | Date ||
| `[nzFormat]` | 展示的日期格式,配置参考 [DatePipe](https://angular.io/api/common/DatePipe) | string | "yyyy" |
| `[nzRenderExtraFooter]` | 在面板中添加额外的页脚 | TemplateRef / string or () => TemplateRef / string | - |
| `[nzPlaceHolder]` | 输入框提示文字 | string | - |
| `(ngModelChange)` | 时间发生变化的回调 | `EventEmitter<Date>` ||

### nz-month-picker

| 参数 | 说明 | 类型 | 默认值 |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@
<div class="ant-calendar-month-calendar-content">
<div class="ant-calendar-month-header-wrap">
<calendar-header
[forceToMonth]="true"
[disabledMonth]="nzDisabledDate"
[panelMode]="panelMode"
(panelModeChange)="onPanelModeChange($event)"
[value]="nzValue"
(valueChange)="onValueChange($event)"
(chooseYear)="onChooseValue('year', $event)"
(chooseMonth)="onChooseValue('month', $event)"
[locale]="nzLocale.lang"
[enablePrev]="true"
[enableNext]="true"
Expand Down
80 changes: 80 additions & 0 deletions components/date-picker/header-picker.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { Component, Input, OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';

import { FunctionProp } from '../core/types/common-wrap';
import { valueFunctionProp } from '../core/util/convert';
import { NzI18nService } from '../i18n/nz-i18n.service';
import { AbstractPickerComponent } from './abstract-picker.component';
import { CandyDate } from './lib/candy-date';
import { PanelMode } from './standard-types';

/**
* The base picker for header panels, current support: Year/Month
*/

@Component({
template: ``
})
export class HeaderPickerComponent extends AbstractPickerComponent implements OnInit, OnChanges {
@Input() nzPlaceHolder: string;

@Input() nzRenderExtraFooter: FunctionProp<TemplateRef<void> | string>;
@Input() nzDefaultValue: CandyDate;
@Input() nzFormat: string; // [Canmplemented by sub class] The output format

endPanelMode: SupportHeaderPanel; // [Implemented by sub class] The final panel for picking a date
panelMode: PanelMode; // Current panel mode
extraFooter: TemplateRef<void> | string;

private supportPanels: PanelMode[];

constructor(i18n: NzI18nService) {
super(i18n);
}

ngOnInit(): void {
super.ngOnInit();

this.panelMode = this.endPanelMode;

const allHeaderPanels: PanelMode[] = [ 'decade', 'year', 'month' ];
this.supportPanels = allHeaderPanels.slice(0, allHeaderPanels.indexOf(this.endPanelMode) + 1);
}

ngOnChanges(changes: SimpleChanges): void {
super.ngOnChanges(changes);

if (changes.nzRenderExtraFooter) {
this.extraFooter = valueFunctionProp(this.nzRenderExtraFooter);
}
}

onPanelModeChange(mode: PanelMode): void {
if (this.supportPanels.indexOf(mode) > -1) {
this.panelMode = mode;
} else { // Since the default "click year" logic can be "year panel" -> "date panel", we need force to the end panel otherwise
this.panelMode = this.endPanelMode;
}
}

onChooseValue(mode: SupportHeaderPanel, value: CandyDate): void {
if (this.endPanelMode === mode) {
super.onValueChange(value);

this.closeOverlay();
}
}

onOpenChange(open: boolean): void {
if (!open) {
this.cleanUp();
}
this.nzOnOpenChange.emit(open);
}

// Restore some initial props to let open as new in next time
private cleanUp(): void {
this.panelMode = this.endPanelMode;
}
}

export type SupportHeaderPanel = 'year' | 'month';
26 changes: 10 additions & 16 deletions components/date-picker/lib/calendar/calendar-header.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,17 @@ export class CalendarHeaderComponent implements OnInit, OnChanges {
@Input() enableNext: boolean = true;
@Input() disabledMonth: (date: Date) => boolean;
@Input() showTimePicker: boolean = false;
@Input() forceToMonth: boolean = false; // Force change panel to month without value change when choose a year/decade

@Input() value: CandyDate;
@Output() valueChange = new EventEmitter<CandyDate>();

@Input() panelMode: PanelMode;
@Output() panelModeChange = new EventEmitter<PanelMode>();

@Output() chooseDecade = new EventEmitter<CandyDate>();
@Output() chooseYear = new EventEmitter<CandyDate>();
@Output() chooseMonth = new EventEmitter<CandyDate>();

prefixCls: string = 'ant-calendar';
yearMonthDaySelectors: YearMonthDaySelector[];

Expand Down Expand Up @@ -60,36 +63,27 @@ export class CalendarHeaderComponent implements OnInit, OnChanges {
}

changePanel(mode: PanelMode, value?: CandyDate): void {
// this.panelMode = mode;
// this.panelModeChange.emit(this.panelMode);
this.panelModeChange.emit(mode);
if (value) {
this.changeValueFromInside(value);
}
}

onChooseDecade(value: CandyDate): void {
if (this.forceToMonth) {
this.value = value; // Change internal value only
this.changePanel('year');
} else {
this.changePanel('year', value);
}
this.changePanel('year', value);
this.chooseDecade.emit(value);
}

onChooseYear(value: CandyDate): void {
if (this.forceToMonth) {
this.value = value; // Change internal value only
this.changePanel('month');
} else {
this.changePanel(this.yearToMonth ? 'month' : 'date', value);
this.yearToMonth = false; // Clear
}
this.changePanel(this.yearToMonth ? 'month' : 'date', value);
this.yearToMonth = false; // Clear
this.chooseYear.emit(value);
}

onChooseMonth(value: CandyDate): void {
this.changePanel('date', value);
this.yearToMonth = false; // Clear
this.chooseMonth.emit(value);
}

changeToMonthPanel(): void {
Expand Down
56 changes: 5 additions & 51 deletions components/date-picker/month-picker.component.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
import { forwardRef, Component, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
import { forwardRef, Component, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

import { FunctionProp } from '../core/types/common-wrap';
import { valueFunctionProp } from '../core/util/convert';
import { NzI18nService } from '../i18n/nz-i18n.service';
import { AbstractPickerComponent } from './abstract-picker.component';
import { CandyDate } from './lib/candy-date';
import { PanelMode } from './standard-types';
import { HeaderPickerComponent, SupportHeaderPanel } from './header-picker.component';

@Component({
selector: 'nz-month-picker',
templateUrl: './month-picker.component.html',
templateUrl: './header-picker.component.html',
providers: [{
provide: NG_VALUE_ACCESSOR,
multi: true,
Expand All @@ -21,49 +16,8 @@ import { PanelMode } from './standard-types';
}
})

export class NzMonthPickerComponent extends AbstractPickerComponent implements OnChanges {
@Input() nzPlaceHolder: string;

@Input() nzRenderExtraFooter: FunctionProp<TemplateRef<void> | string>;
@Input() nzDefaultValue: CandyDate;
export class NzMonthPickerComponent extends HeaderPickerComponent {
@Input() nzFormat: string = 'yyyy-MM';

panelMode: PanelMode = 'month';
extraFooter: TemplateRef<void> | string;

constructor(i18n: NzI18nService) {
super(i18n);
}

ngOnChanges(changes: SimpleChanges): void {
super.ngOnChanges(changes);

if (changes.nzRenderExtraFooter) {
this.extraFooter = valueFunctionProp(this.nzRenderExtraFooter);
}
}

onPanelModeChange(mode: PanelMode): void {
if (mode !== 'date') {
this.panelMode = mode;
}
}

onValueChange(value: CandyDate): void {
super.onValueChange(value);

this.closeOverlay();
}

onOpenChange(open: boolean): void {
if (!open) {
this.cleanUp();
}
this.nzOnOpenChange.emit(open);
}

// Restore some initial props to let open as new in next time
private cleanUp(): void {
this.panelMode = 'month';
}
endPanelMode: SupportHeaderPanel = 'month';
}
Loading

0 comments on commit 8f6c71d

Please sign in to comment.