javascript - 本机日期选择器 - 有没有办法通过 javascript 触发它

Question

有没有办法通过 javascript 在浏览器中触发本机日期选择器。

我想用

<input type="date" />

当输入字段没有焦点时，我想用我自己的样式显示它，然后使用本机日期选择器日历/滚轮（当它有焦点时）。

我很确定它不能完成，但任何想法或建议都会很可爱

Answer 1

很久以前，我曾经拥有，并且在输入下方有一些精美的图像。当用户单击或进入文件输入时，它仍然像魅力一样工作。

你可以试试这个，但我不保证什么。

 type="text/css">
  .date_picker {
    position: relative;
    background:  grey /* your fancy background andstyle here */;
    width: 180px;
    height: 2em;
    display: inline-block;
  }
  .date_picker input[type="date"] {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;    
    opacity: 0;
  }

</style>
  <script >
    document.addEventListener('change', function(event){
      console.log(event);
      if (event.target.nodeName.toLowerCase() == 'input' && event.target.type == 'date') {
        var datePicker = event.target;
        var span = datePicker.previousSibling; 
        while (span.nodeName.toLowerCase() != 'span') {
          span = span.previousSibling;
        } 
        span.innerHTML = datePicker.value;
      }
    }, false);
  </script>   
<label class="date_picker">
    <span class="chosen_date">2013-03-04</span>
    <input type="date" value="2013-03-04"/>  
</label>

适用于铬。不在其他任何地方测试，也没有时间。

主要问题 - 当焦点位于日期字段中时，光标不可见。第二个 - 框右侧应该有一个图像，因此用户知道在哪里单击以下拉日历，因此样式是您自己的。