admin管理员组文章数量:1136290
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>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!
Share Improve this question edited Jul 14, 2018 at 5:45 Chuanqi Sun 1,37218 silver badges29 bronze badges asked Jul 14, 2018 at 3:22 MJ12358MJ12358 1,6771 gold badge11 silver badges16 bronze badges 2 |6 Answers
Reset to default 93For 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
One line solution with showPicker
<input type="date" onfocus="this.showPicker()">
works on type "time" and "datetime-local" too
why not using js to do so
const inputDate = document.getElementById("inputId");
inputDate.addEventListener("focus",function (evt) {
if (this.getAttribute("type")==="date") {
this.showPicker();
}
});
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;
}
Pimped @MJ12358 solution a bit, so the Icon is preserved.
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" />This answer is to add details to Abid's current answer.
You can use showPicker API to programatically shows a picker from common browser implementations:
Commonly browsers implement it for inputs of these types: "date", "month", "week", "time", "datetime-local", "color", or "file".
document.querySelectorAll("button").forEach((button) => {
button.addEventListener("click", (event) => {
const input = event.srcElement.previousElementSibling;
try {
input.showPicker();
} catch (error) {
window.alert(error);
}
});
});<p>
<input type="date" />
<button id="date">Show the date picker</button>
</p>
<p>
<input type="color" />
<button id="color">Show the color picker</button>
</p>
<p>
<input type="file" />
<button id="file">Show the file picker</button>
</p>
<p>
<input type="file" style="display: none;" />
<button id="fileHidden">Show the file picker</button>
</p>
<p>
<input type="color" style="display: none;" />
<button id="colorHidden">Show the color picker</button>
</p>I have also tested with hidden inputs as shown above. The picker still shows up successfully.
Note that there are a few security requirements. Most notably:
Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.
As you can see in the above example code, it doesn't work for
dateinput but only here on StackOverflow because it's in an iframe:
Note: Pickers for date, datetime-local, month, time, week are launched in the same way. They cannot be shown here because live examples run in a cross-origin frame, and would cause a SecurityError
本文标签： javascriptHow to show calendar popup when inputtypequotdatequot is on focusStack Overflow
版权声明：本文标题：javascript - How to show calendar popup when input[type="date"] is on focus - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736945451a1957255.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
input[type="date"]yet. Also, be aware that some older browsers (e.g. IE) don't have the native date picker and will fallback to the plain text input. Mobile browser will also likely have a different UI (e.g. if you expand the calendar by default on iOS it might take up the entire screen). So I recommend that you either leave the default calendar behavior to the browser, or use some third-party datetime pickers. – Chuanqi Sun Commented Jul 14, 2018 at 4:02