修改ant-degisn-vue源码实现月范围开始结束可选同一个月

很多年没更新了

突然想起来,随便写点啥吧.这场新冠肺炎,影响太大了……

记录下最近用vue+antdv ant-degisn-vue 时,日期控件的一个小问题,官方还总是不更新修改,自己动下手,记录下

日期控件选择日期范围时,月模式,选择x月到y月,进入不能允许选择同一个月.

修改月可选择同月

 1 //文件:RangePicker.js
 2 
 3 //位置:node_modules/ant-design-vue/es/date-picker/RangePicker.js
 4 
 5  
 6 
 7 function getShowDateFromValue(value) {
 8 
 9  
10 
11  return [start, end];//by madgoat
12 
13   // var newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end;
14 
15   // return [start, newEnd];
16 
17  
18 
19  
20 
21 //文件:RangeCalendar.js
22 
23 //位置:node_modules/ant-design-vue/es/vc-calendar/src/RangeCalendar.js
24 
25  
26 
27     disabledStartMonth: function disabledStartMonth(month) {
28 
29       var sValue = this.sValue;
30 
31       //by madgoat
32 
33       return month.isAfter(sValue[1], 'month');
34 
35       // return month.isSameOrAfter(sValue[1], 'month');
36 
37     },
38 
39     disabledEndMonth: function disabledEndMonth(month) {
40 
41       var sValue = this.sValue;
42 
43       return month.isBefore(sValue[0], 'month');
44 
45       //by madgoat
46 
47       // return month.isSameOrBefore(sValue[0], 'month');
48 
49     }
50 
51  
52 
53 function getValueFromSelectedValue(selectedValue) {
54 
55   var _selectedValue = _slicedToArray(selectedValue, 2),
56 
57       start = _selectedValue[0],
58 
59       end = _selectedValue[1];
60 
61  
62 
63   return [start, end]; // by madgoat

这样修改完成后,功能是ok了,可是没法提交,而且再次install后,就被覆盖了.

使用patch-package生成一个补丁,install时自动patch,这样就可以提交贡献给小伙伴了.

- 安装patch-package

patch-package包可以通过npm进行安装。

npm i patch-package --save-dev

或者也可以通过yarn进行安装。

yarn add --dev patch-package postinstall-postinstall

- 创建补丁

在修改依赖包内容后，就可以运行patch-package创建patch文件了。

$ npx patch-package package-name # 使用npm
$ yarn patch-package package-name # 使用yarn
运行后通常会在项目根目录下的patches目录中创建一个名为package-name+version.patch的文件。将该patch文件提交至版本控制中，即可在之后应用该补丁了。

- 部署

完成上述操作后，最后还需要修改package.json的内容，在scripts中加入"postinstall": "patch-package"。

"scripts": {
"postinstall": "patch-package"
}
至此，在后续运行npm install或是yarn命令时，便会自动为依赖包打上我们编写的补丁了。

 

难得更新一次,在家里宅的时间太久,好想打球