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>

适用于Chrome。没有其他任何地方，没有时间。

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

原生日期选择器 - 有没有办法通过JavaScript触发它

1 个答案: