
vue2使用el-date-picker(无输入框版)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
<div class="TimeDays_box">
<span style="margin-top: 0.1rem">统计时间:{{ today != "" ? today : days }}</span>
<el-button-group>
<el-button size="mini" :class="{ active: timeDim === 1 }" @click="getCurrentDate(1)">实时</el-button>
<el-button size="mini" :class="{ active: timeDim === 7 }" @click="getCurrentDate(7)">7天</el-button>
<el-button size="mini" :class="{ active: timeDim === 30 }" @click="getCurrentDate(30)">30天</el-button>
<el-button size="mini" :class="{ active: timeDim === 'day' }" @click="openDatePicker('day', $event)">日</el-button>
<el-button size="mini" :class="{ active: timeDim === 'week' }" @click="openDatePicker('week', $event)">周</el-button>
<el-button size="mini" :class="{ active: timeDim === 'month' }" @click="openDatePicker('month', $event)">月</el-button>
</el-button-group>
<!-- 日历 -->
<el-date-picker
ref="datePicker"
v-model="today"
:type="timeDim === 'day' ? 'date' : timeDim === 'week' ? 'week' : 'month'"
value-format="yyyy-MM-dd"
@change="handleDateChange"
style="visibility: hidden"
:picker-options="pickerOptions">
</el-date-picker>
</div>
openDatePicker
方法:
- 这个方法接收一个参数
dim
,表示用户想要打开的日期选择器的类型('day'、'week' 或 'month')。 - 它首先将
timeDim
设置为传入的dim
,用于后续切换日历类型。 - 使用
$nextTick
来确保DOM更新后执行下一步操作。 - 通过调用
handleFocus
和设置pickerVisible
来手动打开日期选择器。
openDatePicker(dim) {
this.timeDim = dim;
// 手动打开日期选择器
this.$nextTick(() => {
this.$refs.datePicker.handleFocus();
this.$refs.datePicker.pickerVisible = true;
});
},
-
el-date-picker
组件:ref="datePicker"
表示这个日期选择器将被引用为datePicker
。v-model="today"
创建了一个数据绑定,将日历的选择结果绑定到today
变量。:type="timeDim === 'day' ? 'date' : timeDim === 'week' ? 'week' : 'month'"
根据timeDim
的值动态设置日期选择器的类型。value-format="yyyy-MM-dd"
指定绑定值的格式。@change="handleDateChange"
表示当日期改变时,调用handleDateChange
方法。style="visibility: hidden"
表示初始时将日历设置为不可见,它将在openDatePicker
方法中被设置为可见。:picker-options="pickerOptions"
允许你自定义日期选择器的行为,但在这个例子中没有具体的选项设置。
-
timeDim
和today
变量:timeDim
是一个变量,默认值为0,表示默认时间维度为当前时间。它可以根据用户的选择动态改变,以决定日历的显示类型。today
是一个变量,用于存储用户从日历中选择的时间。 today: "", //统计时间
handleDateChange
方法:
- 当用户在日期选择器中选择一个日期时,
handleDateChange
方法会被调用。 - 方法首先获取用户选择的日期,并将其存储在
today
变量中。 - 根据
timeDim
的值('day'、'week'、'month'),执行不同的逻辑来计算日期范围。
handleDateChange(value) {
// 根据选择的时间维度处理日期
if (this.timeDim === "week") {
//周维度,计算周的开始
var date = new Date(value);
var y = date.getFullYear();
var m = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
const startOfWeek = y + "-" + m + "-" + (d - 1);
//结束日期
const endOfWeek = new Date(startOfWeek);
endOfWeek.setDate(endOfWeek.getDate() + 6);
var date = new Date(endOfWeek);
var y = date.getFullYear();
var m = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
const endOfWeekvalueDay = y + "-" + m + "-" + d;
this.today = `${startOfWeek} ~ ${endOfWeekvalueDay}`;
this.getList(this.today); //table数据
} else if (this.timeDim === "month") {
// 确保value是一个Date对象
if (typeof value === "string") {
value = new Date(value);
}
// 月维度,计算月的开始和结束日期
const startOfMonth = new Date(value.getFullYear(), value.getMonth(), 1);
const endOfMonth = new Date(value.getFullYear(), value.getMonth() + 1, 0);
const startOfMonthFormatted = this.formatDate(startOfMonth);
const endOfMonthFormatted = this.formatDate(endOfMonth);
this.today = `${startOfMonthFormatted} ~ ${endOfMonthFormatted}`;
this.getList(this.today); //table数据
} else if (this.timeDim === "day") {
console.log(value, "day");
// 日维度
this.today = `${value} ~ ${value}`;
this.getList(this.today); //table数据
}
},
-
计算周的开始和结束 (
timeDim
为 "week"):- 使用
new Date(value)
创建一个日期对象。 - 获取年、月、日,并格式化它们,以便于显示。
- 计算周的开始日期,即选择的日期减去当天的周数。
- 计算周的结束日期,即周的开始日期加上6天。
- 再次格式化结束日期的年、月、日,并将其存储在
endOfWeekvalueDay
变量中。 - 将周的开始和结束日期组合成一个字符串,并存储在
today
变量中。 - 调用
getList
方法,并传入today
变量,以获取相应的表格数据。
- 使用
-
计算月的开始和结束 (
timeDim
为 "month"):- 确保用户选择的是一个日期对象,而不是字符串。
- 计算月的开始日期,即选择的日期所在年的当月第一天。
- 计算月的结束日期,即选择的日期所在年的当月最后一天。
- 格式化月的开始和结束日期,并存储在
startOfMonthFormatted
和endOfMonthFormatted
变量中。 - 将月的开始和结束日期组合成一个字符串,并存储在
today
变量中。 - 调用
getList
方法,并传入today
变量,以获取相应的表格数据。
-
日维度处理 (
timeDim
为 "day"):- 直接将选择的日期存储在
today
变量中,并将其格式化。 - 将选择的日期作为开始和结束日期存储在
today
变量中。 - 调用
getList
方法,并传入today
变量,以获取相应的表格数据。
- 直接将选择的日期存储在
-
formatDate
方法:- 这个方法应该是组件中定义的一个方法,用于将日期对象格式化为年-月-日的字符串。
- 它应该被调用,并传入一个日期对象,返回格式化后的字符串。
style="visibility: hidden"
这个属性设置了一个元素的visibility
属性为hidden
。这意味着元素在页面上是存在的,但是对用户是不可见的。在这个ui组件中建议不要使用display: none属性会导致日历选择错位
这段 CSS 代码用于自定义日历组件的样式,隐藏输入框和图标,并调整日期输入框的位置
::v-deep .custom-date-picker .el-input__inner {
display: none;
}
::v-deep .custom-date-picker .el-input__icon {
display: none;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
position: absolute;
right: 1.5125rem;
top: 0.5625rem;
}




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 3 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)