当 input[type="date"] 成为焦点时如何显示日历弹出窗口
[英]How to show calendar popup when input[type="date"] is on focus
问题描述
Is there a way to activate the native HTML5 date picker dropdown on focus of an input element?
有没有办法在输入元素的焦点上激活原生 HTML5 日期选择器下拉菜单？
Large Input Element:大输入元素：
Currently I can only utilize the calendar on click of an arrow at the far right side of the input element.目前我只能通过单击输入元素最右侧的箭头来使用日历。
Large Input Element Click of Arrow大输入元素点击箭头
I would like to activate this calendar on focus of the input element.我想在输入元素的焦点上激活这个日历。
Here is the code in question.这是有问题的代码。
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Test</title> </head> <style media="screen"> .form-question { display: flex; flex-direction: column; justify-content: center; margin: 0 0 3rem; min-height: 3rem; } .form-question__title { color: #342357; font-size: 1.5rem; padding: 1rem; } .input-container { border-bottom: solid 2px #333333; } .input-container input { border: none; box-sizing: border-box; outline: 0; padding: .75rem; width: 100%; } </style> <body> <div class="form-question"> <div class="form-question__title"> <span>Effective Date</span> </div> <div class="input-container"> <input id="effective-date" type="date" name="effective-date" minlength="1" maxlength="64" placeholder=" " autocomplete="nope" required="required"></input> <span class="bar"></span> </div> </div> </body> </html>
CSS solution preferred but javascript is welcome, please no jQuery.首选 CSS 解决方案，但欢迎使用 javascript，请不要使用 jQuery。
Thanks in advance!提前致谢！
5 个解决方案
解决方案1
45 已采纳 2018-07-15 15:05:06
For anyone who stumbles across this, I solved it (
webkit only
firefox also seems to respect this) by making the calendar-picker-indicator the full height and width of the input, as outlined here .对于任何偶然发现此问题的人，我通过将calendar-picker-indicator设置为输入的完整高度和宽度来解决它（
webkit only
firefox 似乎也尊重这一点），如此处所述。
.input-container input { border: none; box-sizing: border-box; outline: 0; padding: .75rem; position: relative; width: 100%; } input[type="date"]::-webkit-calendar-picker-indicator { background: transparent; bottom: 0; color: transparent; cursor: pointer; height: auto; left: 0; position: absolute; right: 0; top: 0; width: auto; }
<input type="date">
解决方案2
4 2022-06-15 07:26:09
one line solution一条线解决方案
<input type="date" onfocus="this.showPicker()">
works on type "time" and "datetime-local" too也适用于“时间”和“本地日期时间”类型
解决方案3
2 2021-05-27 12:13:19
input[type="date"] {
position: relative;
}
/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after {
content: "\25BC";
color: #555;
padding: 0 5px;
}
/* change color of symbol on hover */
input[type="date"]:hover:after {
color: #bf1400;
}
/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: auto;
color: transparent;
background: transparent;
}
/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button {
z-index: 1;
}
/* adjust clear button */
input[type="date"]::-webkit-clear-button {
z-index: 1;
}
解决方案4
1 2022-03-18 04:29:26
why not using js to do so为什么不使用js来做呢
const inputDate = document.getElementById("inputId");
inputDate.addEventListener("focus",function (evt) {
if (this.getAttribute("type")==="date") {
this.showPicker();
}
});
解决方案5
0 2022-06-02 11:45:49
Pimped @MJ12358 solution a bit, so the Icon is preserved.拉皮条@MJ12358 解决方案有点，所以图标被保留。
input { position: relative; } input[type="date"]::-webkit-calendar-picker-indicator { background-position: right; background-size: auto; cursor: pointer; position: absolute; bottom: 0; left: 0; right: 0; top: 0; width: auto; }
<input type="date" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.