Angular + NG-ZORRO 实现自定义年、月、周、日器范围选择器。
由于业务需求，需要实现能根据选择的查询时间类别进行不同类别的查询。上次做的nz-range-picker虽然能够满足需求，但是用起来体验就不是很好。那么我觉得优化用户的体验就是非常必要的，毕竟自己这里都过不了，谈何给别人使用呢？这是上次做的
nz-range-picker：nz-range-picker 默认展示当前月和上个月，不可选用日期为今日之后和180天之前。
根据选择的统计类别不同选择的时间控件也不同，起始时间选择器打开默认展示上一年，结束时间展示当前年（这边做的交互后面代码有，就不做演示了）。
话不多说搞上代码：
1.首先实现下拉选择框：
html:
<nz-select [(ngModel)]="queryType" [nzMode]="'default'" [nzAllowClear]="false"
nzShowSearch nzAllowClear [nzPlaceHolder]="'统计类别'"
class="inpute-w175 margin7">
<nz-option *ngFor="let option of selectType" nzCustomContent [nzValue]="option.value"
[nzLabel]="option.name">
{{option.name}}
</nz-option>
</nz-select>
.ts:
/**
* 统计类型
*/
slectType: Array<{ name: string; value: string }> = [
{
name: '按年统计',
value: '1'
},
{
name: '按季度统计',
value: '2'
},
{
name: '按月统计',
value: '3'
},
{
name: '按周统计',
value: '4'
},
{
name: '按年日统计',
value: '5'
},
];
/**
* 选择的统计类型
*/
queryType: any = '1';
2.实现日期选择器：
html:
<!-- 下面根据ngif展示对应的事件选择器控件 -->
<nz-year-picker *ngIf="queryType === '1'"
[(ngModel)]="startYear" [nzDisabledDate]="disabledStartYear" (ngModelChange)="onChangeStartYear($event)"
nzPlaceHolder="开始时间" (nzOnOpenChange)=" handleStartOpenChangeYear($event)">
</nz-year-picker>
<nz-month-picker *ngIf="queryType === '2' || queryType === '3'"
" [(ngModel)]="startMonth" tart
(ngModelChange)="onChangeStartMonth($event)" [nzDisabledDate]="disabledStartMonth" nzPlaceHolder="开始时间"
(nzOnOpenChange)=" handleStartOpenChangeMonth($event)">
</nz-month-picker>
<nz-week-picker *ngIf="queryType === '4'"
nzPlaceHolder="开始时间" [(ngModel)]="startWeek" (ngModelChange)="onChangeStartWeek($event)"
[nzDisabledDate]="disabledStartWeek" (nzOnOpenChange)=" handleStartOpenChangeWeek($event)">
</nz-week-picker>
<nz-date-picker *ngIf="queryType === '5'"
nzPlaceHolder="开始时间" [(ngModel)]="startDate" (ngModelChange)="onChangeStartDate($event)"
[nzDisabledDate]="disabledStartDate" (nzOnOpenChange)=" handleStartOpenChangeDate($event)">
</nz-date-picker>
~
<nz-year-picker *ngIf="queryType === '1'"
[(ngModel)]="endYear" [nzDisabledDate]="disabledEndYear" (ngModelChange)="onChangeEndYear($event)"
nzPlaceHolder="结束时间" class="margin7">
</nz-year-picker>
<nz-month-picker *ngIf="queryType === '2' || queryType === '3'"
[nzSize]="appService.formInputSize" [(ngModel)]="endMonth" tart (ngModelChange)="onChangeEndMonth($event)"
[nzDisabledDate]="disabledEndMonth" nzPlaceHolder="结束时间" class="margin7">
</nz-month-picker>
<nz-week-picker *ngIf="queryType === '4'"
nzPlaceHolder="结束时间" [(ngModel)]="endWeek" (ngModelChange)="onChangeEndWeek($event)"
[nzDisabledDate]="disabledEndWeek" class="margin7">
</nz-week-picker>
<nz-date-picker *ngIf="queryType === '5'"
nzPlaceHolder="结束时间" [(ngModel)]="endDate" (ngModelChange)="onChangeEndDate($event)"
[nzDisabledDate]="disabledEndDate" class="margin7">
</nz-date-picker>
.ts:这里代码代码比较多，但是方法是一样的，就用年份选择器演示，其余的选择器根据绑定的方法更改一下绑定值就行了。唯一区别：年、月选择器起始时间默认展示去年，周、日选择器起始时间默认展示上月。
isFirstYear: boolean = true;
isFirstMonth: boolean = true;
isFirstWeek: boolean = true;
isFirstDate: boolean = true;
/**
* 年份选择器绑定
*/
startYear: any = null;
endYear: any = null;
startMonth: any = null;
endMonth: any = null;
startWeek: any = null;
endWeek: any = null;
startDate: any = null;
endDate: any = null;
/*******************************下面这段用于时间选择器的联动逻辑控制************************************ */
/**
* 开始日期数据变动
*/
onChangeStartYear(date: Date): void {
this.startYear = date;
this.isFirstYear = false;
if (!date) {
this.isFirstYear = true;
}
}
/**
* 结束日期数据变动
*/
onChangeEndYear(date: Date): void {
this.endYear = date;
}
/**
* 设置开始年份选择器不可选择范围
*/
disabledStartYear = (startYear: Date): boolean => {
if (!startYear || !this.endYear) {
return differenceInCalendarDays(startYear, new Date()) > 0;
}
return startYear.getTime() > this.endYear.getTime();
}
/**
* 设置结束年份选择器不可选择范围
*/
disabledEndYear = (endYear: Date): boolean => {
if (!endYear || !this.startYear) {
return differenceInCalendarDays(endYear, new Date()) > 0;
}
return endYear.getTime() <= this.startYear.getTime() || differenceInCalendarDays(endYear, new Date()) > 0;
}
/**
*
* 年份选择器打开的时候控制选择的年份为去年
* @param {*} e
* @memberof FinaFlowStatComponent
*/
handleStartOpenChangeYear(e: any): void {
// isFirst用于判断是否第一次打开日期面板
if (e && this.isFirstYear === true) {
setTimeout(() => {
const pre: any = document.getElementsByClassName('ant-calendar-year-panel-prev-decade-btn');
pre[0].click();
}, 0);
setTimeout(() => { // 这一段一定要注意，不然会是第一个上翻a标签触发两次。
const next: any = document.getElementsByClassName('ant-calendar-year-panel-prev-decade-btn');
if (next[1]) {
next[1].click();
}
}, 10);
}
}
//其余省略
/************* */
/*******************************上面这段用于时间选择器的联动逻辑控制************************************ */
增加一个日期起始时间打开
/**
* 日期选择器打开的时候控制选择的日期为上月日期
*
* @param {*} e
* @memberof FinaFlowStatComponent
*/
handleStartOpenChangeDate(e: any): void {
// isFirstDate用于判断是否第一次打开日期面板
if (e && this.isFirstDate === true) {
setTimeout(() => {
const pre: any = document.getElementsByClassName('ant-calendar-prev-month-btn');
pre[0].click();
}, 0);
setTimeout(() => { // 这一段一定要注意，不然会是第一个上翻a标签触发两次。
const next: any = document.getElementsByClassName('ant-calendar-prev-month-btn');
if (next[1]) {
next[1].click();
}
}, 10);
}
}
到这里就差不多结束了，代码是空闲时从项目里整理出来的然后删除了一些东西，简化了一些东西，如果有问题欢迎留言指出，我会进行更正。
成长是一步一步的，可能会很low，但是会越来越好的。
