el-time-picker标签的使用

news2025/5/15 22:29:40

需求：
实现培训日期，用户可以选择某一天的日期，这个比较简单
在这里插入图片描述

<el-form-item label="培训日期" prop="startTime">
          <el-date-picker clearable
                          v-model="form.startTime"
                          type="date"
                          placeholder="请选择培训日期">
          </el-date-picker>
        </el-form-item>

接下来实现el-time-picker，效果值是这样的15：00-16：00
在这里插入图片描述
这里需要注意value-format是格式化成这样的HH:mm格式提交到后端
format是页面上要显示的格式
这里v-model绑定的是数组，另起一个变量，这里不绑定数据库form.endTime字段（因为是字符串，需要提供数组不好处理）

<el-form-item label="培训时间" prop="endTime">
          <el-time-picker
            v-model="trainingTime"
            is-range
            format="HH:mm"
            value-format="HH:mm"
            range-separator="To"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>

const trainingTime = ref([])
// 提交按钮的时候，把数组join连接成字符串form.value.endTime
if (trainingTime.value.length > 0) {
        form.value.endTime = trainingTime.value.join('-');
      }

在这里插入图片描述
修改按钮时，el-time-picker日期回显
/** 修改按钮操作 */
注意这里 trainingTime.value = [“15：00”,“16：00”]必须是你上面指定的HH:mm格式，否则回显不了。

if (res.data.endTime) {
    const [startTimeStr, endTimeStr] = res.data.endTime.split('-');
    trainingTime.value = [startTimeStr, endTimeStr];
  }

在这里插入图片描述
/** 表单重置 */
const reset = () => {
form.value = {…initFormData};
configTags.value = [];
trainingTime.value = [];
examTrainingFormRef.value?.resetFields();
}