ant-desgin DatePicker两个及以上日期选择框联动

今天写一个日期选择框联动的需求，本来是想使用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后再转回去更严谨)