Skip to content

请允许a-range-picker组件在选择月范围时,可以选择一个月,也就是同一个月 #989

@kangning1206

Description

@kangning1206
  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

我们现在在表单查询时,有月计划条件,比如[2019-06,2019-08]表单6,7,8三个月,同时业务上也会查询一个月的,请允许返回 [2019-06,2019-06] 这样的日期,当然了数组是moment实例,YYYY-MM只是为了说明数据;

我查看了官网例子,【受控面板】设置了mode=['month','month'],
https://vue.ant.design/components/date-picker-cn/#components-date-picker-demo-controlled-panels

UI交互很不,两个月面板同时显示,但最短只能选择相邻月份,也就是类似[2019-06,2019-07],无法返回[2019-06,2019-06];

我暂时项目解决方案:
我虽然使用两个'a-month-picker' 组件,通过外观和样式,表单界面修正为与a-range-picker相同的表单,但由于是两个独立的控件,因此月份选择面板是两个,一般需要弹出两次,非常不直观和友好,而且是多次事件;

从外观看是 a-month-picker 控件的结束月面板中,可用月总是大于左侧`开始月的 ,如果最小两个相等则非常OK;

What does the proposed API look like?

通过以上描述:我查看了控件源码,最后发现
更改文件:
https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-calendar/src/RangeCalendar.jsx

更改前

disabledEndMonth(month) {
const { sValue } = this;
return month.isSameOrBefore(sValue[0], 'month');
}

更改后

disabledEndMonth(month) {
const { sValue } = this;
return month.isBefore(sValue[0], 'month');
}

disabledEndMonth 方法是判断处理结束月面板 disabledMonth属性,设置不可用月份;
此处我更改了month的方法,将isSameOrBefore更改为isBefore 即可;

首先a-range-picker的返回值是数组,有两个值,这个是正确的, 从产品或早期设计,可能觉得两个值不应该相等,必须是一个范围,所以最小是1,我希望可以在组件设置上增加属性开关,用开发者决定使用两个日期差为1还是0;

a-range-picker默认模式是选择天,好像可以选择同一天的,现在希望在mode = 'month'模式下可以选择相同月;

以上 虽然是moment的 isSameOrBefore 与isBefore 方法的使用选择问题,但改造组件还是需要antd团队,期待你们下一个版本;

收了很多,不知道有没有说清楚和看明白,最后,非常感谢蚂蚁团队对业界的贡献;

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions