当input [type =" date"]成为焦点时，如何显示日历弹出窗口 [英] How to show calendar popup when input[type="date"] is on focus
问题描述
是否有一种方法可以在输入元素的焦点上激活本地HTML5日期选择器下拉菜单?
大输入元素:
当前，我只能在单击输入元素最右侧的箭头时使用日历.
大输入元素单击箭头
我想在输入元素的焦点上激活此日历.
这是有问题的代码.
<！DOCTYPE html>< html lang ="zh-cn" dir ="ltr">< head>< meta charset ="utf-8">< title> Test</title></head>< style media ="screen">.form-question {显示:flex;flex-direction:列;证明内容:中心；保证金:0 0 3rem;最低身高:3rem;}.form-question__title {颜色:#342357;字体大小:1.5rem；填充:1rem;}.input-container {border-bottom:实心2px#333333;}.input-container输入{边界:无；框大小:border-box；轮廓:0填充:.75rem;宽度:100％;}</style>< body>< div class ="form-question">< div class ="form-question__title">< span>生效日期</span></div>< div class ="input-container"><输入id =有效日期" type =日期" name =有效日期" minlength ="1" maxlength ="64"占位符=" autocomplete ="nope" required =必填"></input>< span class ="bar"></span></div></div></body></html> 首选CSS解决方案，但欢迎使用javascript，请不要使用jQuery.
提前谢谢！
对于任何偶然发现此问题的人，我通过使calendar-picker-indicator 输入的完整高度和宽度，如此处所述.
.input-container input {边界:无；框大小:border-box；轮廓:0填充:.75rem;职位:相对宽度:100％;}输入[type ="date"] ::-webkit-calendar-picker-indicator {背景:透明；底部:0;颜色:透明；光标:指针；高度:自动；左:0；位置:绝对；正确:0；最高:0;宽度:自动;} <输入类型="date"> Is there a way to activate the native HTML5 date picker dropdown on focus of an input element?
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.
Thanks in advance!
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.
.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">
Full-Width Clickable Calendar Dropdown
这篇关于当input [type =" date"]成为焦点时，如何显示日历弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
