html+css+js做一个点击选择日期的效果
时间: 2023-10-06 08:11:41 浏览: 39
好的,以下是一个简单的示例代码,可以实现点击选择日期的效果:
HTML代码:
```html
<input type="text" id="datepicker" readonly="readonly">
<div id="datepicker-container"></div>
```
CSS代码:
```css
#datepicker-container {
position: absolute;
top: 30px;
left: 0;
z-index: 999;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
display: none;
}
#datepicker-container table {
width: 100%;
border-collapse: collapse;
}
#datepicker-container td {
text-align: center;
padding: 5px;
}
#datepicker-container td:hover {
background-color: #f5f5f5;
cursor: pointer;
}
```
JavaScript代码:
```javascript
var datepicker = document.getElementById('datepicker');
var container = document.getElementById('datepicker-container');
datepicker.addEventListener('click', function() {
if (container.style.display === 'none') {
// 显示日期选择器
container.style.display = 'block';
// 获取当前日期
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
// 获取当前月份的天数
var daysInMonth = new Date(year, month, 0).getDate();
// 构建日期表格
var html = '<table><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr><tr>';
for (var i = 1; i <= daysInMonth; i++) {
var date = new Date(year, month - 1, i);
var weekday = date.getDay();
if (i === 1) {
for (var j = 0; j < weekday; j++) {
html += '<td></td>';
}
}
html += '<td data-date="' + year + '-' + month + '-' + i + '">' + i + '</td>';
if (weekday === 6 && i !== daysInMonth) {
html += '</tr><tr>';
}
}
html += '</tr></table>';
container.innerHTML = html;
// 绑定日期单元格点击事件
var cells = container.getElementsByTagName('td');
for (var k = 0; k < cells.length; k++) {
cells[k].addEventListener('click', function() {
var date = this.getAttribute('data-date');
datepicker.value = date;
container.style.display = 'none';
});
}
} else {
// 隐藏日期选择器
container.style.display = 'none';
}
});
```
在这个示例代码中,我们使用了一个文本框和一个容器,文本框用于展示选择的日期,容器用于显示日期选择器。当用户点击文本框时,会弹出日期选择器,日期选择器中的单元格可以点击选择日期,选择后日期选择器会自动隐藏,选择的日期会显示在文本框中。