我如何创建一个选择日期的日历图标，但是在纯JavaScript/html/css中不显示输入？

Question

我的目标

可用的内容

” ：//i.sstatic.net/gxc5i.png“ alt =“在此处输入图像说明”>

这是使用简单的日历输入完成的。

<input type="date">

我尝试减少输入的宽度，但是随着它在不同的浏览器中变形，它似乎并不优雅。以前的图像在铬上。以下是在Mozilla中出现的方式。

我认为我可以为每个浏览器指定宽度。然而，这似乎不高档而令人费解。

Answer 1

在大多数现代浏览器您可以使用showpicker（） 输入[type = date]元素以使小部件出现。

因此，考虑到这一点，您可以将＆lt; input＆gt;移动到带有溢出的容器之外：隐藏，然后从中触发小部件。 >事件在另一个元素上。

像下面的摘要一样工作的类似，尽管由于有限的支持，我并不建议在公共面对的Web应用程序中使用它：

let cal = document.querySelector('label.calendar');
let ci = document.querySelector('label.calendar input[type=date]');
cal.addEventListener('click', event => ci.showPicker());

label.calendar {
  overflow: hidden;
  user-select: none;
  cursor: pointer;
}

label.calendar input {
  position: absolute;
  bottom: 100%;
  left: 0;
  border: 0;
  padding: 0;
  outline: none;
}

<label class="calendar">

  <input type="date">

  <span>

Answer 2

您试图实现的目标是在每个浏览器的一个解决方案中都无法做到的，因为浏览器呈现“日期”输入类型，并且每个人都有自己的有关如何渲染事物的规范。您可以尝试使用自定义组件或插件，该组件或插件使用JavaScript/CSS/HTML呈现日历，这是在不同浏览器中保持一致外观和感觉的唯一方法。