js实现日期单独年月日点击输入框展开滚动选择
js实现日期单独年月日点击输入框展开滚动选择
js实现日期单独年月日点击输入框展开滚动选择
用户478020181
09月16日
|
浏览 200
前端
要实现一个日期选择器,让用户可以单独选择年、月和日,可以使用 HTML、CSS 和 JavaScript。以下是一个基本的实现示例:
复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日期选择器</title>
<style>
.selector {
display: flex;
justify-content: space-around;
margin: 20px;
}
.dropdown {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
z-index: 1;
}
.dropdown.show {
display: block;
}
</style>
</head>
<body>
<div class="selector">
<div>
<input type="text" id="year" placeholder="选择年份" readonly>
<div id="yearDropdown" class="dropdown"></div>
</div>
<div>
<input type="text" id="month" placeholder="选择月份" readonly>
<div id="monthDropdown" class="dropdown"></div>
</div>
<div>
<input type="text" id="day" placeholder="选择日期" readonly>
<div id="dayDropdown" class="dropdown"></div>
</div>
</div>
<script>
const yearInput = document.getElementById('year');
const monthInput = document.getElementById('month');
const dayInput = document.getElementById('day');
function createDropdown(element, items) {
items.forEach(item => {
const div = document.createElement('div');
div.textContent = item;
div.onclick = () => {
element.value = item;
closeDropdowns();
};
return div;
});
}
function openDropdown(dropdownId, items) {
const dropdown = document.getElementById(dropdownId);
dropdown.innerHTML = '';
createDropdown(dropdown, items).forEach(div => dropdown.appendChild(div));
dropdown.classList.add('show');
}
function closeDropdowns() {
document.querySelectorAll('.dropdown').forEach(dropdown => dropdown.classList.remove('show'));
}
yearInput.onclick = () => openDropdown('yearDropdown', Array.from({length: 101}, (_, i) => 1920 + i));
monthInput.onclick = () => openDropdown('monthDropdown', Array.from({length: 12}, (_, i) => i + 1));
dayInput.onclick = () => openDropdown('dayDropdown', Array.from({length: 31}, (_, i) => i + 1));
window.onclick = function(event) {
if (!event.target.matches('input')) {
closeDropdowns();
}
};
</script>
</body>
</html>
解释:
- HTML 结构:创建了三个输入框用于选择年、月、日,每个输入框下都有一个隐藏的下拉菜单。
- CSS 样式:定义了下拉菜单的样式,默认隐藏,点击后显示。
- JavaScript 功能:
createDropdown
:动态创建下拉菜单项。openDropdown
:打开对应的下拉菜单。closeDropdowns
:关闭所有下拉菜单。- 点击输入框时会显示对应的下拉菜单。
这样用户就可以通过点击输入框来选择年、月和日。
我要提问
复制内容
分享给好友
AI编程问答网 免责声明:
以上内容除特别注明外均来源于网友提问,AI编程问答网回答,权益归原著者所有;
上一篇:socks5是什么