备注：由于我是新手，为了方便快速，我就直接修改了组件。如果是和别人协同的项目，修改组件前应该先确认下修改的影响范围。

1.官网地址：

https://uniapp.dcloud.io/component/uniui/uni-datetime-picker.html#%E4%BB%8B%E7%BB%8D

2.页面代码：

<view class="date" @longpress="longPressHandler(i)">
      <uni-datetime-picker :end="nowDate" :disabled="!item.isShow" type="date" :clear-icon="false" v-model="item.date || nowDate" @maskClick="maskClick" @change="change($event,i)"/>
</view>

说明：
1）此日期选择器的end="nowDate"，选择的日期区间是过去到今天，今天之后的日期不能选择；
2）isShow属性值真与否决定是否可以选择日期；
3）默认的日期v-model双向绑定：先取父页面的传值，父页面没有传值时取当前日期。
4）修改日期change事件，传出2个参数：事件本身的结果与当前操作记录的索引值

3.页面结果：
1）日期显示结果：

image.png

2）选择日期的界面

image.png

4.问题描述

1）日期显示页面，日期显示不全；
2）日期选择页面：上面头区域“2022年05月” 垂直与水平都不剧中；
3）日期选择页面：关闭页面的“x” 图标与 “>”图标重合
4）底部页面的字还能显示在日期选择页面上，底部页面还能滚动。

5、解决问题：
1）日期显示不全的问题。
首先定位组件：

image.png

image.png

找组件代码：把它的高度、宽度和行高改为自己需要的，保存代码

image.png

image.png

image.png

image.png

从组件代码里面找到相应类的css代码：在里面给picker加一个flex浮动，然后水平与垂直居中，解决问题。

image.png

3）日期选择页面：关闭页面的“x” 图标与 “>”图标重合
在上面问题2代码相同的地方找关闭图标的代码：把固定元素的代码取消。

image.png

以上3个问题修复完成后，第4个问题居然自动修复了。
修改完成后的结果为：

image.png