<span class="jp-calendar-picker"> <input readonly="" id="bkglCksj" name="bkglCksj" placeholder="请选择日期" class="jp-calendar-picker-input jp-input required" value="${fn.formatDate(zdrgkZdrlkry.bkglCksj!, 'yyyy-MM-dd HH:mm:ss')}"> <span class="jp-calendar-picker-icon" ></span> </span>设置当前时间为默认值.

这段代码中使用了Vue.js框架和Element UI库中的el-date-picker组件，如果你的网页中没有正确引入相关的JavaScript和CSS文件，那么时间选择器可能无法正常显示。 请确保你的网页已经正确引入Vue.js和Element UI库文件，可以在控制台中查看是否有相关的错误提示。同时，也需要确保在Vue.js实例中已经正确定义了value1属性，否则时间选择器也无法正常显示。

以下是调整后的代码，将 `uni-forms-item` 中的 `picker` 内容居中显示： ```html <uni-forms-item label="开始时间"> <picker mode="selector" :range="datetimeRange" @change="handleStartChange"> <view class="input" style="display: flex; align-items: center; justify-content: center;"> <text :class="['placeholder', { 'hide-placeholder': overtimeStart }]" style="text-align: center;">请选择加班开始时间</text> <text class="selected-value" style="text-align: center;">{{ overtimeStart }}</text> </view> </picker> </uni-forms-item> <uni-forms-item label="结束时间"> <picker mode="selector" :range="datetimeRange" @change="handleEndChange"> <view class="input" style="display: flex; align-items: center; justify-content: center;"> <text :class="['placeholder', { 'hide-placeholder': overtimeEnd }]" style="text-align: center;">请选择加班结束时间</text> <text class="selected-value" style="text-align: center;">{{ overtimeEnd }}</text> </view> </picker> </uni-forms-item> ``` ### 修改说明： 1. **外层 `view` 添加 Flex 布局**： - `display: flex`：启用 Flex 布局。 - `align-items: center`：垂直居中。 - `justify-content: center`：水平居中。 2. **内部 `text` 添加文本居中**： - `style="text-align: center;"`：确保文本内容在容器内水平居中。 ### 优化后的完整代码片段： ```html <uni-forms-item label="开始时间"> <picker mode="selector" :range="datetimeRange" @change="handleStartChange"> <view class="input" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80rpx;"> <text :class="['placeholder', { 'hide-placeholder': overtimeStart }]" style="text-align: center;">请选择加班开始时间</text> <text class="selected-value" style="text-align: center;">{{ overtimeStart }}</text> </view> </picker> </uni-forms-item> <uni-forms-item label="结束时间"> <picker mode="selector" :range="datetimeRange" @change="handleEndChange"> <view class="input" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80rpx;"> <text :class="['placeholder', { 'hide-placeholder': overtimeEnd }]" style="text-align: center;">请选择加班结束时间</text> <text class="selected-value" style="text-align: center;">{{ overtimeEnd }}</text> </view> </picker> </uni-forms-item> ``` ### 进一步优化建议： 1. **使用 CSS 类替代内联样式**（推荐）： ```css .input-centered { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80rpx; } .text-centered { text-align: center; } ``` 然后在模板中引用： ```html <view class="input input-centered"> <text class="placeholder text-centered" :class="{ 'hide-placeholder': overtimeStart }">请选择加班开始时间</text> <text class="selected-value text-centered">{{ overtimeStart }}</text> </view> ``` 2. **调整 `picker` 样式**： - 如果 `picker` 默认样式不满足需求，可以通过 `::v-deep` 修改（如高度、边框等）。 ### 最终效果： - 内容（包括占位符和选中值）会在 `picker` 区域内完全居中。 - 兼容不同屏幕尺寸和 `uni-forms` 的布局。