Skip to content

Commit

Permalink
feat(module:datepicker): add range-picker component
Browse files Browse the repository at this point in the history
  • Loading branch information
@hsuanxyz
hsuanxyz committed Dec 10, 2017
1 parent 6ff34ec commit 268afb6
Show file tree
Hide file tree
Showing 19 changed files with 1,034 additions and 223 deletions.
203 changes: 123 additions & 80 deletions src/components/calendar/nz-calendar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export interface DayInterface {
isNextMonth: boolean;
isCurrentDay: boolean;
isSelectedDay: boolean;
isInRange?: boolean;
title: string;
date: Moment;
disabled: boolean;
Expand All @@ -46,6 +47,8 @@ export interface WeekInterface {
days: DayInterface[];
}

export enum RangePart { Start = 0, End = 1 }

@Component({
selector : 'nz-calendar',
encapsulation: ViewEncapsulation.None,
Expand Down Expand Up @@ -99,98 +102,99 @@ export interface WeekInterface {
[class.ant-patch-full-height]="nzDatePicker"
*ngIf="nzMode == 'year'">
<thead>
<tr>
<th
*ngFor="let _min of _listOfWeekName"
[class.ant-fullcalendar-column-header]="!nzDatePicker"
[class.ant-calendar-column-header]="nzDatePicker">
<span class="ant-fullcalendar-column-header-inner">{{ _min }}</span>
</th>
</tr>
<tr>
<th
*ngFor="let _min of _listOfWeekName"
[class.ant-fullcalendar-column-header]="!nzDatePicker"
[class.ant-calendar-column-header]="nzDatePicker">
<span class="ant-fullcalendar-column-header-inner">{{ _min }}</span>
</th>
</tr>
</thead>
<tbody
[class.ant-fullcalendartbody]="!nzDatePicker"
[class.ant-calendartbody]="nzDatePicker">
<tr *ngFor="let week of _weeksCalendar">
<ng-template [ngIf]="!nzDatePicker">
<td
[attr.title]="day.title"
*ngFor="let day of week.days"
[class.ant-fullcalendar-cell]="!nzDatePicker"
[class.ant-calendar-cell]="nzDatePicker"
[class.ant-fullcalendar-last-month-cell]="day.isLastMonth"
[class.ant-fullcalendar-next-month-btn-day]="day.isNextMonth"
[class.ant-fullcalendar-selected-day]="day.isSelectedDay"
[class.ant-fullcalendar-today]="day.isCurrentDay">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value" (click)="_clickDay($event,day)">{{ day.number }}</div>
<div class="ant-fullcalendar-content">
<ng-template
*ngIf="dateCell"
[ngTemplateOutlet]="dateCell"
[ngTemplateOutletContext]="{ $implicit: day}">
</ng-template>
</div>
<tr *ngFor="let week of _weeksCalendar">
<ng-template [ngIf]="!nzDatePicker">
<td
[attr.title]="day.title"
*ngFor="let day of week.days"
[class.ant-fullcalendar-cell]="!nzDatePicker"
[class.ant-calendar-cell]="nzDatePicker"
[class.ant-fullcalendar-last-month-cell]="day.isLastMonth"
[class.ant-fullcalendar-next-month-btn-day]="day.isNextMonth"
[class.ant-fullcalendar-selected-day]="day.isSelectedDay"
[class.ant-fullcalendar-today]="day.isCurrentDay">
<div class="ant-fullcalendar-date">
<div class="ant-fullcalendar-value" (click)="_clickDay($event,day)">{{ day.number }}</div>
<div class="ant-fullcalendar-content">
<ng-template
*ngIf="dateCell"
[ngTemplateOutlet]="dateCell"
[ngTemplateOutletContext]="{ $implicit: day}">
</ng-template>
</div>
</td>
</ng-template>
<ng-template [ngIf]="nzDatePicker">
<td
[attr.title]="day.title"
*ngFor="let day of week.days"
class="ant-calendar-cell"
[class.ant-calendar-disabled-cell-first-of-row]="day.firstDisabled"
[class.ant-calendar-disabled-cell-last-of-row]="day.lastDisabled"
[class.ant-calendar-disabled-cell]="day.disabled"
[class.ant-calendar-last-month-cell]="day.isLastMonth"
[class.ant-calendar-next-month-btn-day]="day.isNextMonth"
[class.ant-calendar-selected-day]="day.isSelectedDay"
[class.ant-calendar-today]="day.isCurrentDay">
<div class="ant-calendar-date" (click)="_clickDay($event,day)">{{ day.number }}</div>
</td>
</ng-template>
</tr>
</div>
</td>
</ng-template>
<ng-template [ngIf]="nzDatePicker">
<td
[attr.title]="day.title"
*ngFor="let day of week.days"
class="ant-calendar-cell"
[class.ant-calendar-disabled-cell-first-of-row]="day.firstDisabled"
[class.ant-calendar-disabled-cell-last-of-row]="day.lastDisabled"
[class.ant-calendar-disabled-cell]="day.disabled"
[class.ant-calendar-last-month-cell]="day.isLastMonth"
[class.ant-calendar-next-month-btn-day]="day.isNextMonth"
[class.ant-calendar-selected-day]="day.isSelectedDay"
[class.ant-calendar-in-range-cell]="day.isInRange"
[class.ant-calendar-today]="day.isCurrentDay">
<div class="ant-calendar-date" (click)="_clickDay($event,day)">{{ day.number }}</div>
</td>
</ng-template>
</tr>
</tbody>
</table>
<table
[class.ant-fullcalendar-month-panel-table]="!nzDatePicker"
[class.ant-calendar-month-panel-table]="nzDatePicker"
*ngIf="nzMode == 'month'">
<tbody class="ant-fullcalendar-month-panel-tbody">
<tr *ngFor="let quarter of _quartersCalendar">
<ng-template [ngIf]="!nzDatePicker">
<td
*ngFor="let month of quarter"
[attr.title]="month.name"
class="ant-fullcalendar-month-panel-cell"
[class.ant-fullcalendar-month-panel-selected-cell]="month.isSelectedMonth"
[class.ant-fullcalendar-month-panel-current-cell]="month.isCurrentMonth">
<div class="ant-fullcalendar-month">
<div class="ant-fullcalendar-value" (click)="_clickMonth($event,month)">{{ month.name }}</div>
<div class="ant-fullcalendar-content">
<ng-template
*ngIf="monthCell"
[ngTemplateOutlet]="monthCell"
[ngTemplateOutletContext]="{ $implicit: month}">
</ng-template>
</div>
</div>
</td>
</ng-template>
<ng-template [ngIf]="nzDatePicker">
<td
*ngFor="let month of quarter"
[attr.title]="month.name"
class="ant-calendar-month-panel-cell"
[class.ant-calendar-month-panel-selected-cell]="month.isSelectedMonth"
[class.ant-calendar-month-panel-cell-disabled]="month.disabled"
[class.ant-calendar-month-panel-current-cell]="month.isCurrentMonth">
<div class="ant-calendar-month-panel-month" (click)="_clickMonth($event,month)">
{{ month.name }}
<tr *ngFor="let quarter of _quartersCalendar">
<ng-template [ngIf]="!nzDatePicker">
<td
*ngFor="let month of quarter"
[attr.title]="month.name"
class="ant-fullcalendar-month-panel-cell"
[class.ant-fullcalendar-month-panel-selected-cell]="month.isSelectedMonth"
[class.ant-fullcalendar-month-panel-current-cell]="month.isCurrentMonth">
<div class="ant-fullcalendar-month">
<div class="ant-fullcalendar-value" (click)="_clickMonth($event,month)">{{ month.name }}</div>
<div class="ant-fullcalendar-content">
<ng-template
*ngIf="monthCell"
[ngTemplateOutlet]="monthCell"
[ngTemplateOutletContext]="{ $implicit: month}">
</ng-template>
</div>
</td>
</ng-template>
</tr>
</div>
</td>
</ng-template>
<ng-template [ngIf]="nzDatePicker">
<td
*ngFor="let month of quarter"
[attr.title]="month.name"
class="ant-calendar-month-panel-cell"
[class.ant-calendar-month-panel-selected-cell]="month.isSelectedMonth"
[class.ant-calendar-month-panel-cell-disabled]="month.disabled"
[class.ant-calendar-month-panel-current-cell]="month.isCurrentMonth">
<div class="ant-calendar-month-panel-month" (click)="_clickMonth($event,month)">
{{ month.name }}
</div>
</td>
</ng-template>
</tr>
</tbody>
</table>
</div>
Expand All @@ -206,6 +210,7 @@ export class NzCalendarComponent implements OnInit {
private _datePicker = false;
private _fullScreen = true;
private _showHeader = true;
private _isRange = true;

_el: HTMLElement;
_weeksCalendar: WeekInterface[] = [];
Expand All @@ -218,6 +223,7 @@ export class NzCalendarComponent implements OnInit {
_showMonth = moment(new Date()).month();
_showYear = moment(new Date()).year();
_value: Date = new Date();
_rangeValue: Date[] = [null, null];
_locale = this._localeService.getLocale().locale;
@ContentChild('dateCell') dateCell: TemplateRef<void>;
@ContentChild('monthCell') monthCell: TemplateRef<void>;
Expand Down Expand Up @@ -245,6 +251,15 @@ export class NzCalendarComponent implements OnInit {
return this._showHeader;
}

@Input()
set nzIsRange(value: boolean) {
this._isRange = toBoolean(value);
}

get nzIsRange(): boolean {
return this._isRange;
}

@Input() nzDisabledDate: (date: Date) => boolean = () => false;

@Input()
Expand Down Expand Up @@ -272,6 +287,16 @@ export class NzCalendarComponent implements OnInit {
return this._value || new Date();
}

@Input()
get nzRangeValue(): Date[] {
return this._rangeValue;
}

set nzRangeValue(value: Date[]) {
this._rangeValue = value;
this._buildCalendar();
}

@Input()
set nzShowYear(value: number) {
this._showYear = value;
Expand Down Expand Up @@ -328,6 +353,23 @@ export class NzCalendarComponent implements OnInit {
this.nzClickMonth.emit(month);
}

_isSelectedDay(date: Moment, month: Moment): boolean {
if (this.nzIsRange) {
return (date.isSame(this._rangeValue[RangePart.Start], 'day') || date.isSame(this._rangeValue[RangePart.End], 'day'))
&& date.month() === month.month();
} else {
return date.isSame(this.nzValue, 'day');
}
}

_isInRange(date: Moment, month: Moment): boolean {
if (this.nzIsRange && this._rangeValue[RangePart.End]) {
return date.isBetween(this._rangeValue[RangePart.Start], this._rangeValue[RangePart.End]) && date.month() === month.month();
} else {
return false;
}
}

_buildMonth(d: Moment): WeekInterface[] {
const weeks: WeekInterface[] = [];
const _rawDate = this._removeTime(d);
Expand Down Expand Up @@ -355,7 +397,8 @@ export class NzCalendarComponent implements OnInit {
isLastMonth : date.month() < month.month(),
isNextMonth : date.month() > month.month(),
isCurrentDay : date.isSame(new Date(), 'day'),
isSelectedDay: date.isSame(this.nzValue, 'day'),
isSelectedDay: this._isSelectedDay(date, month),
isInRange : this._isInRange(date, month),
title : date.format('YYYY-MM-DD'),
date,
disabled : this.nzDisabledDate && this.nzDisabledDate(date.toDate()),
Expand Down
5 changes: 3 additions & 2 deletions src/components/datepicker/nz-datepicker.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ import { NzLocaleModule } from '../locale/index';
import { NzTimePickerModule } from '../time-picker/nz-timepicker.module';
import { NzUtilModule } from '../util/nz-util.module';
import { NzDatePickerComponent } from './nz-datepicker.component';
import { NzRangePickerComponent } from './nz-rangepicker.component';

@NgModule({
imports : [ CommonModule, NzTimePickerModule, NzUtilModule, NzInputModule, NzCalendarModule, FormsModule, OverlayModule, NzLocaleModule ],
declarations: [ NzDatePickerComponent ],
exports : [ NzDatePickerComponent ]
declarations: [ NzDatePickerComponent, NzRangePickerComponent ],
exports : [ NzDatePickerComponent, NzRangePickerComponent ]
})
export class NzDatePickerModule {
}
Loading

0 comments on commit 268afb6

Please sign in to comment.