今天完成的事情：
今天主要在完善时间搜索功能，以及其他搜索功能联动，完成新增编辑页面的两个选择框联动出现，同时在出现第二个选择框时也是必选，以及图片上传完成之后，在这些必选的都填上之后提交按钮才接触禁用。
明天计划的事情：
把页面的登录验证加上
遇到的问题：
因为ngzorro时间选择框默认是选择的是当前的（时分秒），转化为时间戳之后搜索结果和任务演示上不同。因为更改时间戳影响了整个表单验证，从服务端去到时间戳需要把格式转换回来才能被组件识别展示在页面上
this.validateForm = this.fb.group({
startAt : [res.startAt?new Date(new Date(+res.startAt).toLocaleDateString()):''], //发布时间按照这一天的00：00开始计算
endAt: [res.endAt？new Date(new Date(+res.endAt).toLocaleDateString()):''], //new Date(new Date().toLocaleDateString()把时分秒全变为0
type: [res.type||''],
status: [res.status||''],
page:[res.page||''],
size:[res.size||'']
new Date(new Date(+res.endAt).toLocaleDateString()
这段代码的意思是把时间戳转为日期的格式同时把时分秒默认为0，这样就可以和服务端的时间戳保持一致了
收获：
关于angular的时间选择框的组件
<nz-date-picker
[nzDisabledDate]="disabledStartDate"
formControlName="startAt"
(ngModelChange)="onStartChange($event)"
>
</nz-date-picker>
<nz-date-picker
formControlName="endAt"
[nzDisabledDate]="disabledEndDate"
(ngModelChange)="onEndChange($event)"
></nz-date-picker>
这里限制选择的时间范围，不能选择end时间之前的时间
startValue: Date | null = null;
endValue: Date | null = null;
disabledStartDate = (startValue: Date): boolean => {
if (!startValue || !this.endValue) {
return false;
}
return startValue.getTime() > this.endValue.getTime();//这里必须使用getTime使用getDate会导致之前的不在这个范围的天数还是可以选的
};
disabledEndDate = (endValue: Date): boolean => {
if (!endValue || !this.startValue) {
return false;
}
return endValue.getTime() <= this.startValue.getTime();
};
onStartChange(date: Date): void {
this.startValue = date;
}
onEndChange(date: Date): void {
this.endValue = date;
}
这里必须使用getTime获取，如果使用了getDate，前面的日期选择或出现之前的月份里的日期有一部分还是可以选择的
返回列表
评论