在具有多個輸入欄位 <input type="date" />的網路應用程式上，我收到了許多用戶抱怨，他們發現 Android 日期選擇器令人困惑。他們不知道如何選擇年份，我不得不承認：這真的不明顯（示例圖片）。
我嘗試了一個簡單的文本欄位和正則運算式驗證的解決方法，但它很復雜并且容易出錯（閏年等）。
有沒有辦法禁用 datepicker 小部件（通常或僅在移動設備上），同時仍保留 iputtype="date"和可訪問的鍵盤輸入選項？
（這個問題或多或少與這個問題相反。）
uj5u.com熱心網友回復：
嘗試使用以下 CSS 規則。（注意，這只適用于基于 WebKit 的瀏覽器。）
前：
<input type="date" />后：
input::-webkit-calendar-picker-indicator{
display: none;
}
input[type="date"]::-webkit-input-placeholder{
visibility: hidden !important;
}<input type="date" />uj5u.com熱心網友回復：
現在，您可以通過檢查瀏覽器用戶代理來選擇執行此腳本以將日期輸入型別轉換為僅適用于移動瀏覽器的文本
(function () {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
var inputs = document.querySelectorAll("input[type=date]");
for (let i = 0; i < inputs.length; i ) {
inputs[i].setAttribute("type", "text");
}
}
})();
uj5u.com熱心網友回復：
您可以使用類似的方法來確定作業系統是否為 android，然后通過將新類附加到元素來將彈出視窗的顯示屬性設定為無
以下示例僅適用于 android 或用戶代理的名稱中包含 android
注意：請使用開發者工具更改用戶代理。
window.addEventListener('DOMContentLoaded', (event) => {
let userAgent = navigator.userAgent.toLowerCase();
let Android = userAgent.indexOf("android") > -1;
if(Android) {
let dateInputs = document.querySelectorAll('input[type=date]');
Array.from(dateInputs).map((input)=>{
input.classList.add('disableDatePickerPopup')
})
}
});.disableDatePickerPopup::-webkit-calendar-picker-indicator{
display:none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="date" name="" id="">
</body>
</html>uj5u.com熱心網友回復：
我以前也遇到過同樣的問題。一個版本的 Android 有這個奇怪的日歷界面。所以我不得不使用 Jquery-ui 日期選擇器插件，以便它可以增強日歷功能以獲得更好的 UI。
uj5u.com熱心網友回復：
試試這個
<input type="date" onkeydown="return false" />
或者
<input type="date" onKeyDown={(e) => e.preventDefault()} .... />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/422199.html
標籤：