js实现日期单独年月日点击输入框展开滚动选择
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编程问答网回答,权益归原著者所有;