请把排班信息选择按日和按周查看前端显示出来的代码写出来
时间: 2024-02-09 22:12:58 浏览: 20
好的,以下是一个简单的前端代码示例,用于实现按日和按周查看排班信息的界面:
HTML 代码:
```
<div>
<label>选择日期:</label>
<input type="date" id="date-picker">
<button onclick="viewScheduleByDay()">查看</button>
</div>
<div>
<label>选择起始日期:</label>
<input type="date" id="start-date-picker">
<button onclick="viewScheduleByWeek()">查看</button>
</div>
<div id="schedule-info"></div>
```
JavaScript 代码:
```
// 按日查看排班信息
function viewScheduleByDay() {
const datePicker = document.getElementById("date-picker");
const selectedDate = datePicker.value;
// 调用后端 API 获取当天的排班信息
fetch(`/api/schedule/day?date=${selectedDate}`)
.then(response => response.json())
.then(data => {
// 将排班信息显示在页面上
const scheduleInfo = document.getElementById("schedule-info");
scheduleInfo.innerHTML = JSON.stringify(data);
});
}
// 按周查看排班信息
function viewScheduleByWeek() {
const startDatePicker = document.getElementById("start-date-picker");
const startDate = startDatePicker.value;
// 调用后端 API 获取一周的排班信息
fetch(`/api/schedule/week?start_date=${startDate}`)
.then(response => response.json())
.then(data => {
// 将排班信息显示在页面上
const scheduleInfo = document.getElementById("schedule-info");
scheduleInfo.innerHTML = JSON.stringify(data);
});
}
```
当用户选择日期或起始日期并点击“查看”按钮时,JavaScript 代码将向后端 API 发送请求,并将返回的排班信息显示在页面上。请注意,这只是一个简单的示例,具体实现可能需要根据您的具体需求进行修改和调整。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)