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

js实现日期单独年月日点击输入框展开滚动选择
用户478020181
09月16日
|
浏览 143
后端

要实现一个日期选择器,其中年月日可以单独点击输入框展开滚动选择,可以使用 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';
}

说明

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

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

我要提问
复制内容
分享给好友
AI编程问答网 免责声明:
以上内容除特别注明外均来源于网友提问,AI编程问答网回答,权益归原著者所有;