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 (中国标准时间)'];
  }
}
相关文章
element-el-time-picker 开始时间-结束时间-回显(整理)
element-el-time-picker 开始时间-结束时间-回显(整理)
|
JavaScript
vue element plus TimePicker 时间选择器
vue element plus TimePicker 时间选择器
552 0
|
移动开发 小程序 前端开发
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
|
前端开发
【前端图表】echarts散点图鼠标划过散点显示信息
【前端图表】echarts散点图鼠标划过散点显示信息
403 0
|
JavaScript 数据格式
VUE element-ui下拉菜单el-select获取label值或value的值
VUE element-ui下拉菜单el-select获取label值或value的值
3299 0
VUE element-ui下拉菜单el-select获取label值或value的值
Element el-time-picker el-time-select 时间选择器详解
本文目录 1. 概述 2. 选择任意时间 3. 默认时间设置 4. 时间格式设置 5. 指定可选时间段 6. 选择时间点 7. 时间选择变化事件
6057 0
|
JavaScript 数据格式
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
2496 0
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
|
JavaScript
Vue2日期选择器插件(vue-datepicker-local)
这是一个基于 Vue 的日期选择器组件库,支持年份、月份、日期和时间的选择,并且均可进行范围选择。用户可以自定义日期格式与组件样式。该示例展示了如何配置组件以限制可选日期范围,并提供了相应的代码实现。
2970 0
Vue2日期选择器插件(vue-datepicker-local)
|
存储 JavaScript 前端开发
element ui <el-date-picker> 设置展示当前月
在 Element UI 中,使用 `el-date-picker` 的 `value-format` 属性可将日期值格式化为指定字符串。设置 `type=&quot;month&quot;` 时,绑定值默认为 Date 对象,通过 `value-format=&quot;yyyy-MM&quot;` 可将其转为如 &quot;2023-05&quot; 格式,便于存储与处理。
1573 0
Vue3日期选择器(DatePicker)
该组件基于 **@vuepic/vue-datepicker@9.0.1** 进行二次封装,简化了日常使用。除范围和年选择器外,其他日期选择均返回格式化的字符串。提供了多种自定义设置,如日期选择器宽度、模式、格式等,并支持时间选择和“今天”按钮展示。详细配置及更多功能请参考[官方文档](https://vue3datepicker.com/installation/)。组件已集成所有原生属性,并支持主题颜色自定义。 示例代码展示了如何创建和使用日期选择器组件,包括基本使用、禁用日期、日期时间选择器、范围选择器等多种场景。更多功能和样式可通过官方文档了解。
4165 2
Vue3日期选择器(DatePicker)