码多多AI编程问答网

要实现一个日期选择器，其中年月日可以单独点击输入框展开滚动选择，可以使用 JavaScript 和 HTML 结合一些 CSS。以下是一个基本示例：

HTML

复制代码

<div>
    <input type="text" id="year" placeholder="年" readonly onclick="toggleYear()">
    <input type="text" id="month" placeholder="月" readonly onclick="toggleMonth()">
    <input type="text" id="day" placeholder="日" readonly onclick="toggleDay()">
</div>

<div id="yearPicker" style="display:none;">
    <!-- 年份选择 -->
    <select id="yearSelect" onchange="selectYear()">
        <script>
            for (let i = 1900; i <= 2100; i++) {
                document.write(`<option value="${i}">${i}</option>`);
            }
        </script>
    </select>
</div>

<div id="monthPicker" style="display:none;">
    <!-- 月份选择 -->
    <select id="monthSelect" onchange="selectMonth()">
        <script>
            for (let i = 1; i <= 12; i++) {
                document.write(`<option value="${i}">${i}</option>`);
            }
        </script>
    </select>
</div>

<div id="dayPicker" style="display:none;">
    <!-- 日期选择 -->
    <select id="daySelect" onchange="selectDay()">
        <script>
            for (let i = 1; i <= 31; i++) {
                document.write(`<option value="${i}">${i}</option>`);
            }
        </script>
    </select>
</div>

JavaScript

复制代码

function toggleYear() {
    document.getElementById('yearPicker').style.display = 
        document.getElementById('yearPicker').style.display === 'none' ? 'block' : 'none';
    document.getElementById('monthPicker').style.display = 'none';
    document.getElementById('dayPicker').style.display = 'none';
}

function toggleMonth() {
    document.getElementById('monthPicker').style.display = 
        document.getElementById('monthPicker').style.display === 'none' ? 'block' : 'none';
    document.getElementById('yearPicker').style.display = 'none';
    document.getElementById('dayPicker').style.display = 'none';
}

function toggleDay() {
    document.getElementById('dayPicker').style.display = 
        document.getElementById('dayPicker').style.display === 'none' ? 'block' : 'none';
    document.getElementById('yearPicker').style.display = 'none';
    document.getElementById('monthPicker').style.display = 'none';
}

function selectYear() {
    const year = document.getElementById('yearSelect').value;
    document.getElementById('year').value = year;
    document.getElementById('yearPicker').style.display = 'none';
}

function selectMonth() {
    const month = document.getElementById('monthSelect').value;
    document.getElementById('month').value = month;
    document.getElementById('monthPicker').style.display = 'none';
}

function selectDay() {
    const day = document.getElementById('daySelect').value;
    document.getElementById('day').value = day;
    document.getElementById('dayPicker').style.display = 'none';
}

说明

上述代码创建了三个输入框用于选择年、月和日。
点击每个输入框时，会显示相应的下拉选择框。
选择年份、月份或日期后，会将值填入对应的输入框，并隐藏选择框。

你可以根据需要进一步美化样式或添加功能，例如限制日期的有效范围。

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

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

HTML

JavaScript

说明