今天遇到了一个需求,修改element-ui的时间组件,将分钟和秒钟改成30为一个间隔,而不是1一个间隔

今天遇到了一个任务,修改element-ui的时间组件,将分钟和秒钟改成30为一个间隔,而不是1一个间隔

如何修改element-ui的时间组件

第一步:下载两个依赖包

第一个
npm  i element-ui@2.15.13  --save 
还需要再下载一个
npm i date-time-picker-pro@1.0.2 --save

第二步: 在页面上直接使用时间组件

 <date-time-picker-pro
    v-model="datetime" //-->这个是数据双向绑定的时间数据.可以做回显用
    @change="send"   //--> 这个是时间改变触发的事件
    type="datetimerange" // --> 这个是时间类型
    :default-time="['09:00:00', '19:00:00']" //--> 这个是设置的默认值
    :custom-minute-step="30" //--> 分钟的间隔调整
    :custom-second-step="30" //--> 这个是秒钟的间隔调整
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy/MM/dd HH:mm:ss"
    format="yyyy/MM/dd HH:mm:ss"
  ></date-time-picker-pro>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cpBl8SzQ-1685092956409)(时间组件说明.assets/image-20230526171243017.png)]

未封转直接使用的完整的代码:

<template>
  <div>
    <date-time-picker-pro
      v-model="multipleDateTime"
      type="datetimerange"
      :default-time="['09:00:00', '19:00:00']"
      :custom-minute-step="30"
      :custom-second-step="30"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy/MM/dd HH:mm:ss"
      format="yyyy/MM/dd HH:mm:ss"
    ></date-time-picker-pro>
    <el-button type="primary" @click="fn">主要按钮</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      multipleDateTime: ["2022/03/05 12:30:30", "2023/05/25 14:00:00"],
    };
  },
  methods: {
    fn() {
      alert(this.multipleDateTime);
    },
  },
};
</script>

封转成一个组件在使用的完整代码

时间组件的代码

//时间组件的代码:
<template>
  <date-time-picker-pro
    v-model="datetime"
    @change="send"
    type="datetimerange"
    :default-time="['09:00:00', '19:00:00']"
    :custom-minute-step="30"
    :custom-second-step="30"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy/MM/dd HH:mm:ss"
    format="yyyy/MM/dd HH:mm:ss"
  ></date-time-picker-pro>
</template>

<script>
export default {
  props: ["date"],
  data() {
    return {
      datetime: [],
    };
  },
  methods: {
    send() {
      this.$emit("dateTime", this.datetime);
    },
  },
  watch: {
    date: {
      deep: true,
      immediate: true,
      handler(n, o) {
        this.datetime = n;
      },
    },
  },
};
</script>

<style lang="less" scoped></style>

调用时间组件的代码:

<template>
  <div>
    //在页面上使用组件
    // date是数据双向绑定的值
    // rev是输入框的时间改变触发的方法函数
    <date :date="multipleDateTime" @dateTime="rev"></date>

  <el-button type="primary" @click="fn">获取输入框时间</el-button>
  </div>

</template>

<script>
      // 这个是引入时间组件
import date from './components/dateTime.vue'
  export default {
    components: {
      date,//挂载组件
    },
    data() {
      return {
       multipleDateTime: ['2022/03/05 12:30:30','2023/05/25 14:00:00'],
      };
    },
    methods: {
      rev(val) {
        this.multipleDateTime=val
      },
      fn(){
        console.log(this.multipleDateTime);
      }
    },
  }
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NB3dSnqB-1685092956410)(时间组件说明.assets/image-20230526170813443.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9x0eLs8G-1685092956411)(时间组件说明.assets/image-20230526170844448.png)]