（输入类型=日期）单击框时显示日历

Question

我正在使用<input type="date" name="bday">，当我点击框的右侧时显示日历，如下所示..

现在我想在点击框的任何部分时显示日历。我应该编码什么来实现...

Answer 1

这个怎么样？它对我有效。

<style type="text/css">
    input[type="date"]::-webkit-calendar-picker-indicator {
        background: transparent;
        bottom: 0;
        color: transparent;
        cursor: pointer;
        height: auto;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: auto;
    }
</style>
<input type="date">

Answer 2

EDIT3：

似乎Firefox甚至不支持输入日期元素...

所以这可能是一个很好的黑客攻击，但如果你想要一个真正适当的跨浏览器日期输入元素考虑使用一些库/插件。

EDIT2：

在IE11中测试过，似乎甚至不支持日期输入元素....只需隐藏＆＃34; .picker＆＃34;对于IE11我猜。

编辑：

不可能实现：https://jsfiddle.net/65p0et7z/

这是一个肮脏的css / js hack，除了chrome之外我还没有在其他浏览器上测试过。

HTML：

<div class="wrapper">
    <input class="date" type="date">
    <input class="picker" type="date">
</div>

JS（jQuery的）：

$(".picker").on("change", function() {
    var date = $(this).val();
    $(".date").val(date);
})

的CSS：

.wrapper {
    position: relative;
    width: 146px;
    height: 24px;
    margin: 20px;
    overflow: hidden;
}
.date {
    border: 0;
    width: 146px;
    height: 24px;
    line-height: 24px;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border: 1px solid #999;
    box-sizing: border-box;
}
.picker {
    width: 200px;
    height: 24px;
    font-size: 999px;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
}

很抱歉这是不可能的，我尝试在下拉箭头上模拟点击事件，但这似乎也没有用，我会尝试看看我是否可以做一些事情一点视觉黑客：P