html+css+js+php写一个日期选择功能
时间: 2023-07-04 11:22:37 浏览: 108
以下是一个使用 HTML、CSS、JavaScript 和 PHP 实现的日期选择器示例:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>日期选择器</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form method="post" action="">
<label for="date">请输入日期:</label>
<input type="text" id="date" name="date" placeholder="请点击选择日期">
<div id="calendar"></div>
<input type="submit" value="提交">
</form>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
#calendar {
position: absolute;
z-index: 1;
background-color: #fff;
border: 1px solid #ccc;
display: none;
}
#calendar table {
border-collapse: collapse;
}
#calendar th, #calendar td {
padding: 5px;
}
#calendar th {
background-color: #f2f2f2;
text-align: center;
}
#calendar td {
border: 1px solid #ccc;
text-align: center;
}
#calendar td:hover {
background-color: #f2f2f2;
cursor: pointer;
}
```
JavaScript 代码:
```javascript
var calendar = document.getElementById('calendar');
var dateInput = document.getElementById('date');
// 点击日期输入框显示日历
dateInput.addEventListener('click', function() {
if (calendar.style.display == 'none') {
calendar.style.display = 'block';
} else {
calendar.style.display = 'none';
}
});
// 生成日历
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var selectedDate = '';
generateCalendar(year, month);
function generateCalendar(year, month) {
var table = document.createElement('table');
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
var thPrev = document.createElement('th');
var thNext = document.createElement('th');
var thMonth = document.createElement('th');
var daysInMonth = new Date(year, month, 0).getDate();
var firstDayOfMonth = new Date(year, month - 1, 1).getDay();
var lastDayOfMonth = new Date(year, month, 0).getDay();
thPrev.innerHTML = '<';
thPrev.setAttribute('colspan', '2');
thPrev.addEventListener('click', function() {
month--;
if (month == 0) {
year--;
month = 12;
}
generateCalendar(year, month);
});
thNext.innerHTML = '>';
thNext.setAttribute('colspan', '2');
thNext.addEventListener('click', function() {
month++;
if (month == 13) {
year++;
month = 1;
}
generateCalendar(year, month);
});
thMonth.innerHTML = year + '年' + month + '月';
thMonth.setAttribute('colspan', '3');
tr.appendChild(thPrev);
tr.appendChild(thMonth);
tr.appendChild(thNext);
thead.appendChild(tr);
tr = document.createElement('tr');
tr.innerHTML = '<th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th>';
tbody.appendChild(tr);
tr = document.createElement('tr');
for (var i = 0; i < firstDayOfMonth; i++) {
tr.appendChild(document.createElement('td'));
}
for (var i = 1; i <= daysInMonth; i++) {
var td = document.createElement('td');
td.innerHTML = i;
td.addEventListener('click', function() {
selectedDate = year + '-' + month + '-' + this.innerHTML;
dateInput.value = selectedDate;
calendar.style.display = 'none';
});
if (year == today.getFullYear() && month == today.getMonth() + 1 && i == today.getDate()) {
td.classList.add('today');
}
tr.appendChild(td);
if (tr.childNodes.length == 7) {
tbody.appendChild(tr);
tr = document.createElement('tr');
}
}
for (var i = lastDayOfMonth; i < 6; i++) {
tr.appendChild(document.createElement('td'));
}
tbody.appendChild(tr);
table.appendChild(thead);
table.appendChild(tbody);
calendar.innerHTML = '';
calendar.appendChild(table);
}
```
PHP 代码:
```php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$date = $_POST['date'];
// 处理用户选择的日期
}
```
在上述代码中,HTML 代码包含了一个日期输入框和一个隐藏的日历,当用户点击输入框时,会显示日历。CSS 代码定义了日历的样式,JavaScript 代码实现了日历的生成和显示,并在用户选择日期时将其赋值给输入框。PHP 代码在表单提交时获取用户选择的日期。
阅读全文