今天遇到了一个任务,修改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)]