[英]How to show calendar popup when input[type="date"] is on focus
有沒有辦法在輸入元素的焦點上激活原生 HTML5 日期選擇器下拉菜單？
大輸入元素：
目前我只能通過單擊輸入元素最右側的箭頭來使用日歷。
大輸入元素點擊箭頭
我想在輸入元素的焦點上激活這個日歷。
這是有問題的代碼。
<!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 解決方案，但歡迎使用 javascript，請不要使用 jQuery。
提前致謝！
對於任何偶然發現此問題的人，我通過將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">
一條線解決方案
<input type="date" onfocus="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;
}
為什么不使用js來做呢
const inputDate = document.getElementById("inputId");
inputDate.addEventListener("focus",function (evt) {
if (this.getAttribute("type")==="date") {
this.showPicker();
}
});
拉皮條@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" />
隱藏的日歷彈出窗口 <input type=“date”> 在Firefox中
[英]hide the calendar popup of <input type=“date”> in Firefox
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.