vue3-element-admin的组件el-time-picker设置只能选择上午或下午

简介: vue3-element-admin的组件el-time-picker设置只能选择上午或下午

上午:

<el-time-picker style="width: 80%;" :disabled="!top_status" is-range v-model="top_time"range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" @change="startTime">
</el-time-picker>
const startTime = (value) => {
  let formattedDates = [];
  value.forEach((time) => {
    let inputTime = new Date(time);
    let hours = inputTime.getHours();
    let minutes = inputTime.getMinutes();
    let seconds = inputTime.getSeconds();
    let formattedTime = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
    formattedDates.push(formattedTime);
  });
  // 在这里处理选中时间的逻辑
  let h = formattedDates[0].split(':')
  let s = formattedDates[1].split(':')
  console.log(s);
  if (h[0] > 12 || s[0] > 12) {
    ElMessage({
      type: 'warning',
      message: '只能选择上午',
    });
    top_time.value = ['Thu Jan 25 2024 08:00:00 GMT+0800 (中国标准时间)', 'Thu Jan 25 2024 08:01:11 GMT+0800 (中国标准时间)'];
  }
};

下午:

<el-time-picker is-range v-model="bottom_time" :disabled="!bottom_status" range-separator="至"
              start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" @change="endTime">
            </el-time-picker>
const endTime = (value) => {
  let formattedDates = [];
  value.forEach((time) => {
    let inputTime = new Date(time);
    let hours = inputTime.getHours();
    let minutes = inputTime.getMinutes();
    let seconds = inputTime.getSeconds();
    let formattedTime = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
    formattedDates.push(formattedTime);
  });
  // 在这里处理选中时间的逻辑
  let h = formattedDates[0].split(':')
  let s = formattedDates[1].split(':')
  if (h[0] < 12 || s[0] < 12) {
    ElMessage({
      type: 'warning',
      message: '只能选择下午',
    });
    bottom_time.value = ['Thu Jan 25 2024 12:00:00 GMT+0800 (中国标准时间)', 'Thu Jan 25 2024 12:01:11 GMT+0800 (中国标准时间)'];
  }
}
相关文章
|
7月前
|
JavaScript
vue element plus TimeSelect 时间选择
vue element plus TimeSelect 时间选择
201 0
element-el-time-picker 开始时间-结束时间-回显(整理)
element-el-time-picker 开始时间-结束时间-回显(整理)
element-plus:el-date-picker日期只选择年月不要日
element-plus:el-date-picker日期只选择年月不要日
810 0
|
JavaScript 数据格式
VUE element-ui下拉菜单el-select获取label值或value的值
VUE element-ui下拉菜单el-select获取label值或value的值
2010 0
VUE element-ui下拉菜单el-select获取label值或value的值
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
5062 0
Element el-date-picker 日期选择器详解
|
5月前
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
288 1
Element el-time-picker el-time-select 时间选择器详解
本文目录 1. 概述 2. 选择任意时间 3. 默认时间设置 4. 时间格式设置 5. 指定可选时间段 6. 选择时间点 7. 时间选择变化事件
4233 0
mo-quarter-picker:基于 Vue2 和 ElementUI 的季度范围选择器
mo-quarter-picker:基于 Vue2 和 ElementUI 的季度范围选择器
847 0
mo-quarter-picker:基于 Vue2 和 ElementUI 的季度范围选择器
element ui el-date-picker 禁止选择指定日期
element ui el-date-picker 禁止选择指定日期
271 0