请问uni-calendar 日历 选择时间范围的开始时间和结束时间怎么拿呀
<uniCalendar ref="calendar" :insert="false" :start-date="startDate" :end-date="endDate" :clearDate="false" :range="info.range" @confirm="confirm">
confirm(e) {
if (this.nowDate != e.fulldate || !this.showCalendar) {
this.showCalendar = true;
this.$refs.caleDrop.selectAuto();
this.nowDate = e.fulldate;
this.showDataTime = e.fulldate.replace(/-/g, "");
this.$Common.tipMsg("当前时间:" + this.showDataTime)
this.rangeStartDate=e.range.before;
this.rangeEndDate=e.range.after;
}
},
可以通过使用 JavaScript 的 Date 对象和相关方法,来获取指定日期范围的开始时间和结束时间。下面是一个示例代码,假设日历已经在 HTML 中呈现,日历的第一行代表一天的时间范围:
html
<!DOCTYPE html>
<html>
<head>
<title>My Calendar</title>
<link rel="stylesheet" href="style.css">
<script>
// 初始化日历
function initCalendar() {
// 创建日历表格
var table = document.getElementById("calendar-table");
// 获取第一行日期和时间
var date = getDate();
var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(),
"08:00:00", "00:00:00");
var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(),
"18:00:00", "00:00:00");
// 在日历表格中显示日期和时间
for (var i = 0; i < 7; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < 7; j++) {
var td = document.createElement("td");
td.textContent = i;
if (i == 0) {
td.style.backgroundColor = "#D9EDF7";
} else if (i == 6) {
td.style.backgroundColor = "#E0E0E0";
}
tr.appendChild(td);
}
table.appendChild(tr);
}
// 获取选中的日期和时间
var selectedDate = new Date(startDate.getTime());
for (var i = 0; i < 7; i++) {
if (table.rows[i].style.backgroundColor == "rgba(0, 0, 0, 0.1)") {
selectedDate.setHours(startDate.getHours() + i * 1);
break;
}
}
selectedDate.setDate(startDate.getDate() + 7);
// 将选中的日期和时间显示在页面上
document.getElementById("selected-date").innerText =
selectedDate.toLocaleDateString();
document.getElementById("selected-time").innerText =
selectedDate.toLocaleTimeString();
}
// 获取当前日期
function getDate() {
var date = new Date();
return date;
}
</script>
</head>
<body onload="initCalendar()">
<h1>My Calendar</h1>
<div>
<input type="button" value="Next Month" onclick="