时间戳

首页 > 解决方案 > 使用纯 Javascript 隐藏默认日期选择器 UI

javascript - 使用纯 Javascript 隐藏默认日期选择器 UI

问题描述

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

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

标签： javascriptdatepickerpreventdefault

解决方案

您所需要的只是一个<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>

推荐阅读