【uniapp】uni-datetime-picker插件支持限制选择当前或者以后时间、禁用日期区域

欢迎点击领取 -《前端开发面试题进阶秘籍》：前端登顶之巅-最全面的前端知识点梳理总结

*分享一个使用比较久🪜

1. 简介/官方uni-ui日期控件痛点

目前官方文档没有可禁用日期的功能，因此我们要实现类似elementUI日期控件:picker-options="pickerOptions"的禁用功能，需要在官方文档的基础上修改了日期控件源代码，让其实现：

:picker-options="pickerOptions"
 disabledDate(time) {
   return time.getTime() < Date.now() - 8.64e7;
 }

2. 实现思路

1）首先disabledDate是在父组件使用的一个函数 => <uni-datetime-picker :disabledDate="disabledDate" />
2）通过父组件递次往子组件传参 => <Calendar :disabledDate="disabledDate" /> <calendar-item />
3）针对calendar-item组件对其修改禁用代码及disabledDate回传参数，让其可自定义进行判断
4）将修改的源码进行依赖库打补丁，这样其他人安装依赖后，会自动使用；

2.1 效果展示

3. 代码修改步骤

1）在业务代码中 uni-datetime-picker 组件的页面，把 disabledDate 函数参数传递给该组件，让其子组件可接收到；

<uni-datetime-picker
   type="daterange"
   ref="datePickerRefs"
   returnType="timestamp"
   v-model="datetimerange"
   :disabledDate="disabledDate"
 />

const disabledDate = (time) => time > Date.now();

const datePickerRefs = ref<any>(null);

const datetimerange = ref<any[]>([]);

2）
两种情况：使用官方HBuilderX集成开发对标1点寻找，使用脚手架cli方式使用2点寻找

1、修改在uni_modules文件夹下的 uni-datetime-picker => uni-datetime-picke.vue
2、修改在node_modules文件夹下的 @dcloudio => uni-ui => uni-datetime-picker => uni-datetime-picke.vue

作者使用的是cli + vite + pnpm后面打补丁以当前pnpm为准，npm也类似，自查；

1）主要修改三个文件，在下方图中(1,2,3)中，props：依次传入disabledDate函数，缺一不可；
2）在 uni-datetime-picker.vue 中 子组件全部传入<Calendar :disabledDate="disabledDate" />

3) 对calendar-item组件，模版元素进行修改重点：

 3.1）将：disabledDate(new Date(weeks.fullDate).setHours(0, 0, 0, 0)，添加到下图对应位置

4、完结及打补丁操作

1、上述代码修改完是可以直接在本地进行编译验证的，直到修改为你满意的效果后，在进行依赖打补丁；
2、使用pnpm的patch命令打补丁,安装依赖后自动打上修改的内容
3、通过命令拷贝一份依赖库的文件项目，然后用户对该拷贝的项目进行修改(或者依赖中修改满意后) => pnpm patch 依赖库名称@版本号 eg: pnpm patch @dcloudio/uni-ui@1.4.28

# 注意这里要指定对应的版本
pnpm patch @dcloudio/uni-ui@1.4.28

You can now edit the following folder: pnpm patch-commit /private/var/folders/3c/v35nykz53t11n6gl0gl2kn6w0000gn/T/e07c1fd284b06829e8872915955e71cd

4、打开生成的这个链接/private/var/folders/3c/v35nykz53t11n6gl0gl2kn6w0000gn/T/e07c1fd284b06829e8872915955e71cd，在里面修改@dcloudio/uni-ui的代码、或者将本地项目内依赖库组件修改好的文件进行对应替换(推荐)
5、修改完成保存后，执行如下指令：

pnpm patch-commit /private/var/folders/3c/v35nykz53t11n6gl0gl2kn6w0000gn/T/e07c1fd284b06829e8872915955e71cd 

6、然后可以看到项目中生成了一个patches/@dcloudio__uni-ui@1.4.28.patch的文件，同时在package.json中也增加了如下配置：

"pnpm": {
    "patchedDependencies": {
      "@dcloudio/uni-ui@1.4.28": "patches/@dcloudio__uni-ui@1.4.28.patch"
    }
  }

7、查看node_modeles下的@dcloudio/uni-ui@1.4.28代码，该修改已经加上了，后续别人拿到该项目，重新pnpm i也能得到修改后的代码

如果使用window并且使用git-bash的话，文件路径要使用两个\分割, 如：
pnpm patch-commit C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\482a1b2c5aaad6b4abb4d39bab8ef39c\\user