修改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命令时，便会自动为依赖包打上我们编写的补丁了。
难得更新一次,在家里宅的时间太久,好想打球🏀
