今天写一个日期选择框联动的需求,本来是想使用range的,但是range在具体使用上有诸多不便,于是便将两个日期选择框进行独立联动,在传值时将两个值再按照自己想要的格式进行传递
这里我的写的是开始和结束年份保持在一年的例子(其他需求亦可以此为变种进行编写)
这里的话需要用到一个非常好用的时间处理插件moment,安装的话直接使用npm i moment下载即可
引用:
import moment from 'moment'
html
<nz-year-picker
nzFormat="yyyy"
name="warmStartyear"
[(ngModel)]="modal.warmStartyear"
(ngModelChange)="warmStartyearchange($event)"
>
</nz-year-picker>
<label style="margin: 0 20px;">一</label>
<nz-year-picker
nzFormat="yyyy"
name="warmEndyear"
[(ngModel)]="modal.warmEndyear"
(ngModelChange)="warmEndyearchange($event)"
>
</nz-year-picker>
ts
modal = {
warmStartyear: null,
warmEndyear: null,
warmyear: null
};
warmStartyearchange(value) {
this.modal.warmEndyear = moment(String(Number(moment(value).format('YYYY')) + 1)).valueOf();
this.modal.warmyear = moment(value).format('YYYY') + '-' + (Number(moment(value).format('YYYY')) + 1);
}
warmEndyearchange(value) {
this.modal.warmStartyear = moment(String(Number(moment(value).format('YYYY')) - 1)).valueOf();
this.modal.warmyear = (Number(moment(value).format('YYYY')) - 1) + '-' + moment(value).format('YYYY');
}
这里值得一提的是 DatePicker 组件回显日期的话需要标准格式的日期亦或是时间戳,否则会导致回显失败。这里的话当然转成时间戳对我们是最方便的,下面这行是我所需要传给后台的数据格式 '1970-1971’这种字符串的格式,其他处理方式亦可在此进行
(ps:此处处理年份+1或者月份+1不建议使用直接加时间戳的方式进行,因为月份有长有短,年份时在闰年的时候也会出现偏差,因为现将其转为数字+1后再转回去更严谨)