javascript 如何在输入 [type="date"] 处于焦点时显示日历弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51334960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show calendar popup when input[type="date"] is on focus
提问by MJ12358
Is there a way to activate the native HTML5 date picker dropdown on focus of an input element?
有没有办法在输入元素的焦点上激活本机 HTML5 日期选择器下拉菜单？
Large Input Element:
大输入元件：
![Large Input[type=date] Element](/static/img/viewimg.png)
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!
提前致谢！
采纳答案by MJ12358
For anyone who stumbles across this, I solved it (webkit onlyfirefox also seems to respect this) by making the calendar-picker-indicatorthe full height and width of the input, as outlined here.
对于任何人谁碰到这个跌倒，我解决了这个问题（webkit的只有火狐似乎也尊重这个）通过将calendar-picker-indicator输入的整个高度和宽度，概述这里。
.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;
}
