码多多AI编程问答网

要实现一个日期选择器，让用户可以单独选择年、月和日，可以使用 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：关闭所有下拉菜单。
- 点击输入框时会显示对应的下拉菜单。

这样用户就可以通过点击输入框来选择年、月和日。

js实现日期单独年月日点击输入框展开滚动选择

js实现日期单独年月日点击输入框展开滚动选择

解释：