将上面代码里的日期的下拉框变成日历表,输出代码
时间: 2024-02-24 22:59:21 浏览: 21
好的,以下是将日期下拉框改为日历表的代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日历表</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle;
border: 1px solid #ccc;
}
td:hover {
background-color: #f5f5f5;
cursor: pointer;
}
.today {
background-color: #00bcd4;
color: #fff;
}
</style>
</head>
<body>
<form>
<input type="text" id="date" name="date" readonly>
<div id="calendar"></div>
</form>
<script type="text/javascript">
var dateInput = document.getElementById('date');
var calendar = document.getElementById('calendar');
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var date = today.getDate();
var days = new Date(year, month, 0).getDate();
var firstDay = new Date(year, month - 1, 1).getDay();
dateInput.value = year + '-' + month + '-' + date;
var table = document.createElement('table');
var tr = document.createElement('tr');
var weekdays = ['日', '一', '二', '三', '四', '五', '六'];
for (var i = 0; i < weekdays.length; i++) {
var th = document.createElement('th');
th.textContent = weekdays[i];
tr.appendChild(th);
}
table.appendChild(tr);
var count = 1;
for (var i = 0; i < 6; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < 7; j++) {
var td = document.createElement('td');
if (i == 0 && j < firstDay) {
td.textContent = '';
} else if (count <= days) {
td.textContent = count;
if (count == date) {
td.classList.add('today');
}
count++;
} else {
td.textContent = '';
}
tr.appendChild(td);
}
table.appendChild(tr);
}
calendar.appendChild(table);
table.addEventListener('click', function(e) {
var td = e.target;
if (td.tagName == 'TD' && td.textContent != '') {
var year = today.getFullYear();
var month = today.getMonth() + 1;
var date = td.textContent;
dateInput.value = year + '-' + month + '-' + date;
table.querySelector('.today').classList.remove('today');
td.classList.add('today');
}
});
</script>
</body>
</html>
```
这段代码实现了一个简单的日历表,通过点击其中的日期单元格选择日期,然后将选择的日期显示在文本框中。