使用纯 Javascript 隐藏默认日期选择器 UI [重复]

Posted 2023-05-07

【中文标题】使用纯 Javascript 隐藏默认日期选择器 UI [重复]

【英文标题】：Hide the default datepicker UI using plain Javascript [duplicate]

【发布时间】：2020-05-23 14:39:17

【问题描述】：

我想创建一个输入字段，用户可以在其中输入日期。但我只想用键盘输入。我可以阻止默认日期选择器打开吗？当我点击或单击输入字段时会打开它？

<input type="date" id="pickerFromDate" placeholder="dd-mm-yyyy" name="pickerFromDate" min="1900-01-01" max="2100-01-01">

【参考方案1】：

您可以在文本输入中使用模式。

<input type="text" pattern="[0-9]4-[0-9]2-[0-9]2" />

或者您可以在样式文件 (.scss) 中添加以下代码来隐藏日历选择器指示器。

[type="date"]::-webkit-calendar-picker-indicator 
      display: none;
    

希望对你有所帮助。

【参考方案2】：

您只需要一个<input type="text">，因为它仍然可以保存日期，但不能作为date 对象：

<input type="text" placeholder="dd-mm-yy">

更多款式：

let x = 0, l = 0, original = "dd-mm-yy";
function redirect(elem) 
  elem.focus();

function log(el) 
  let str = el.innerText,
  end = document.getElementById("end"),
  newtxt = "", texxt = el.innerText + "c", len = str.length;
  
  let orig = original + "c";
  newtxt = orig.slice(len, -1);
  
  end.innerText = newtxt;

#inp 
  width: 200px;
  height: 20px;
  border: 1px solid lightgrey;
  font-family: Arial;
 #end 
  color: grey;
 #date:focus 
  outline: none;

<div id="inp" onclick="redirect(document.getElementById('date'))">
<span id="date" onkeyup="log(this)" contenteditable></span><span id="end">dd-mm-yy</span>
</div>

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。