Ant Design实现月份选择

背景

1. 需求：在调拨管理模块下的在途数据详情，需要按月搜索数据。
2. 问题点：在ANTD3.X版本中，没有MonthRangePicker，需要自己利用 mode 和 onPanelChange 方法封装一个 MonthRangePicke 组件
3. 实现后截图：

实现代码

<FormItem
label="月份:"
style={{ display: 'inline-block' }}
>
{getFieldDecorator('reportMonth', {
initialValue: [moment().subtract(1, 'month').startOf('month'), moment().endOf('month')],
})(
<RangePicker
placeholder={['开始月份', '结束月份']}
format="YYYY-MM"
mode={['month', 'month']}
onPanelChange={(value) => {
setFieldsValue({
reportMonth: [value[0].startOf('month'), value[1].startOf('month')],
});
}}
/>,
)}
</FormItem>

知识点

1. mode
   1.1 定义
   说明: 日期面板的状态;
   类型: time|date|month|year|decade
   默认值： ‘date’
   1.2 使用说明
   因为需求为RangePicker，所以mode需要一个数组来定义
2. onPanelChange
   2.1 定义
   说明: 日历面板切换的回调;
   类型: function(value, mode)
   默认值：-
   版本： 3.12.0
   2.2 使用说明
   2.2.1 经过 getFieldDecorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
   你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。
   你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 里的 initialValue。
   你不应该用 setState，可以使用 this.props.form.setFieldsValue 来动态改变表单值。
   2.2.2 因为2.2.1原因，改变value值需要使用setFieldsValue而不是setState
   2.2.3 若使用reportMonth：value改变值，获取到的时间有问题。
   value会自动保存默认或者上次选择的日期，所以直接用value有可能会导致当选择7月到8月时，不是从7月1日到8月31日，而是从7月28日到8月28日。
   打印代码如下：

onPanelChange={(value) => {
console.log(value[0].format('YYYYMMDD'));
console.log(value[1].format('YYYYMMDD'));
setFieldsValue({
reportMonth: value,
});
}}

打印结果如下:

3. initialValue 同2.2.1 是初始值
4. moment().subtract(1, ‘month’).startOf(‘month’)上个月（从第一天开始）
5. moment().endOf(‘month’)本月（最后一天结束）

• 点赞
• 收藏
• 分享
• 文章举报