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 (中国标准时间)'];
  }
}
相关文章
|
2月前
|
JavaScript
vue element plus TimeSelect 时间选择
vue element plus TimeSelect 时间选择
68 0
|
2月前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
element-el-time-picker 开始时间-结束时间-回显(整理)
element-el-time-picker 开始时间-结束时间-回显(整理)
antdv框架a-date-picker只选择年demo(整理)
antdv框架a-date-picker只选择年demo(整理)
|
JavaScript 数据格式
VUE element-ui下拉菜单el-select获取label值或value的值
VUE element-ui下拉菜单el-select获取label值或value的值
1670 0
VUE element-ui下拉菜单el-select获取label值或value的值
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
4492 0
Element el-date-picker 日期选择器详解
|
2月前
|
JavaScript 前端开发 小程序
element 订单列表中 实现多个倒计时(vue+js)
element 订单列表中 实现多个倒计时(vue+js)
|
7月前
【Vue2.0学习】—el与data的两种写法(三十六)
【Vue2.0学习】—el与data的两种写法(三十六)
|
2月前
el-date-picker的使用
el-date-picker的使用
|
8月前
el-date-picker
el-date-picker
46 0