HTML5输入类型=日期：我可以用JavaScript打开/关闭日期选择器吗？

Question

我正在尝试自定义HTML5 input type =“date”元素。我想添加一个单独的按钮，它将切换日期选择器下拉列表的可见性。我找不到任何关于此的信息。任何帮助非常感谢！

Answer 1

以下是我使用CSS制作的解决方案。

＆＃13;

＆＃13;

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.exmp-wrp {
    margin-top: 100px;
    position: relative;
    width: 200px;
}

.btn-wrp {
    border: 1px solid #dadada;
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 10;
}

.btn-clck {
    border: none;
    background: transparent;
    width: 100%;
    padding: 10px;
}

.btn-clck::-webkit-calendar-picker-indicator {
    right: -10px;
    position: absolute;
    width: 78px;
    height: 40px;
    color: rgba(204, 204, 204, 0);
    opacity: 0
}

.btn-clck::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.btn-clck::-webkit-clear-button {
    margin-right:75px;
 }
.btn {
    height: 100%;
    background: #fda200;
    border: none;
    color: #fff;
    padding: 13px;
    position: absolute;
    right: 0;
    top: 0;
}

＆＃13;

<div class="exmp-wrp">
  <div class="btn-wrp">
    <input type="date" class="btn-clck"/>
  </div>
  <button class="btn">Click me</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

$(document).ready(function () {
    $('input[type="date"]').change(function () {
        closeDate(this);
    });

});

function closeDate(dateInput) {
    $(dateInput).attr('type', 'text');
    $(dateInput).attr('type', 'date');
}

Answer 3

考虑使用jQuery UI datepicker。它甚至有一个接近你想要达到的例子。

Click here to see an example close to your request