时间选择器datetimerpicker封装使用(非脚手架)
datePicker.vue 封装
<template>
<el-date-picker
v-model="currentTime"
type="datetimerange"
:picker-options="pickerOptions"
range-separator="~"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
@change="getChorceTime">
</el-date-picker>
</template>
<script>
module.exports = {
name: "datePicker",
props: ['time'],
data() {
return {
currentTime: "",
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
}
},
methods:{
getChorceTime(val){
if(val == null){
bus.$emit('changeTimeValue',"");
}else{
bus.$emit('changeTimeValue',val)
}
}
}
}
</script>
<style scoped>
</style>
注意:
value-format :一定要,否则选择的时间是带有英文月份的时间,不是想要的年月日时分秒
getChorceTime(val){
if(val == null){
bus.$emit('changeTimeValue',""); // 必要:当交互中清除已选时间时查询条件应该清空
}else{
bus.$emit('changeTimeValue',val) // 传递当前选择的时间
} }
使用
js.
module.exports = { name:'FileUpload', components: { 'date-picker': httpVueLoader('/template/default/pc/home/index/components/datePicker.vue'), },
}
<template>
<date-picker :time="searchForm.time"></date-picker>
</template>
核心:
mounted(){
bus.$on('changeTimeValue',(val)=>{
if(val){
this.searchForm.time = val[0] + '~' + val[1];
}else{
this.searchForm.time = "";
}
})
}
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/15791230.html
分类:
Vue
, element_ui
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」