一、使用说明
三个示例:选择项** year、month、day**
三个示例:配置不同组件参数即可
1、安装dayjs、element-ui
2、需要用到时间禁用mixins:链接: 超强element时间禁用mixins.js
二、功能
- 箭头加减天、箭头加减月、箭头加减年。
- 时间组件的基本时间选择
- 不支持未来时间选择(需要自行修改,很简单的)。
2.1 示例图天(截图时间2024-01-05)
点击一下左箭头效果
2.2 示例图月(截图时间2024-01-05)
点击一下左箭头效果
2.3 示例图年 截图时间2024-01-08)
【年是后面新增功能直接改属性用即可】
三、父页面使用组件 home.vue
<template>
<div >
<h1>选择天示例</h1>
<timecontrol :time="timeA" @timechange="timechangeA" type="day"/>
<h1>选择月示例</h1>
<timecontrol :time="timeB" @timechange="timechangeB" type="month"/>
<h1>选择年示例</h1>
<timecontrol :time="timeC" @timechange="timechangeC" type="year"/>
</div>
</template>
<script>
import timecontrol from "@/components/timeControl/index.vue";
export default {
components:{ timecontrol },
data () {
return {
timeA:"", // 日期
timeB:"", // 月
timeC:"", // 年
};
},
created(){
// 初始化时间传入【dayjs请到main.js全局挂载】
this.timeA = this.$dayjs(new Date(Date.now() - 8.64e7)).format("YYYY-MM-DD");
this.timeB = this.$dayjs().format("YYYY-MM");
this.timeC = this.$dayjs().format("YYYY");
},
methods: {
timechangeA(timeA){ // 获取到天
console.log("改变日",timeA)
},
timechangeB(timeB){ // 获取到月
console.log("改变月",timeB)
},
timechangeB(timeB){ // 获取到年
console.log("改变年",timeC)
}
}
};
</script>
四、组件代码 timecontrol.vue
<template>
<div class="timer">
<i class="icon el-icon-caret-left" @click="timeControl(1)"></i>
<el-date-picker
style="width:80px;"
prefix-icon="none"
size="mini"
:picker-options="chooseDatePicker(null,2,false)"
v-model="inputTime"
:type="dateType"
:value-format="format"
:format="format"
placeholder="请选择日期"
@change="timeChange"
:clearable="false"/>
<i v-show="showAdd" class="icon el-icon-caret-right" @click="timeControl(2)"></i>
</div>
</template>
<script>
import disabledDate from "@/mixins/disabledDate"; // 文件位置请参考 文档上面链接【时间禁用mixins】
export default {
name:"timecontrol",
mixins:[disabledDate],
props:{
time:{
type:String,
default:()=>{
return this.$dayjs(new Date(Date.now())).format("YYYY-MM-DD");
}
},
type:{
type:String,
default:'day'
}
},
data(){
return{
inputTime:""
}
},
watch:{
time(newValue){
this.inputTime = newValue;
}
},
mounted(){
this.inputTime = this.time;
},
// 是否展示加号:需要用计算属性来计算
computed:{
dateType(){
switch(this.type){
case "day": return 'date';
case "month": return 'month';
case "year": return 'year';
}
},
showAdd(){
if(this.type=="day"){ // 天:大于昨天不显示加号
let yesterdayEnd = this.$dayjs().subtract(2,"day").format("YYYY-MM-DD 23:59:59")
return this.$dayjs(this.time) < this.$dayjs(yesterdayEnd);
}else if(this.type=="month"){ // 可选当前月
let timeMonth = this.$dayjs(this.time).format("YYYY-MM");
let thisMonthEnd = this.$dayjs().format("YYYY-MM")
return this.$dayjs(timeMonth) < this.$dayjs(thisMonthEnd);
}else if(this.type=="year"){
let timeYear = this.$dayjs(this.time).format("YYYY");
let thisYearEnd = this.$dayjs().format("YYYY")
return this.$dayjs(timeYear) < this.$dayjs(thisYearEnd);
}
},
format(){
switch(this.type){
case "day": return 'yyyy-MM-dd';
case "month": return 'yyyy-MM';
case "year": return 'yyyy';
}
}
},
methods:{
// 减- 加 限制超过今天 1减 2 加
timeControl(type){
let time;
if(this.type == 'day'){
let num = type == 1? -86400000: 86400000; // 判断 + -
let curTimeStr = new Date(this.time); // 选中时间
let fixedNum = new Date(curTimeStr).getTime() + num; // 加减计算结果
time = this.$dayjs(fixedNum).format("YYYY-MM-DD");
}else if(this.type == 'month'){
let added = this.$dayjs(new Date(this.time)).add(1,'month');
let subtracted = this.$dayjs(new Date(this.time)).subtract(1,'month');
time = type == 1?this.$dayjs(subtracted).format("YYYY-MM"):this.$dayjs(added).format("YYYY-MM");
}else if(this.type == 'year'){
let added = this.$dayjs(new Date(this.time)).add(1,'year');
let subtracted = this.$dayjs(new Date(this.time)).subtract(1,'year');
time = type == 1?this.$dayjs(subtracted).format("YYYY"):this.$dayjs(added).format("YYYY");
}
this.inputTime = time;
this.$emit("timechange",time);
},
// 自己不用选了
timeChange(time){
this.inputTime = time;
this.$emit("timechange",time);
},
}
}
</script>
<style lang="scss" scoped>
.timer{
display:flex;
align-items: center;
padding-bottom: 2px;
width: 100%;
i{
font-size: 28px;
line-height: 28px;
color:#7C8295;
cursor: pointer;
}
}
/deep/.el-input__inner{
padding:5px;
text-align: center;
}
</style>