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

Question

I am trying to customise the HTML5 input type="date" element. I want to add a separate button clicking which will toggle visibility of the date picker dropdown. I couldn't find any info on this. Any help greatly appreciated!

Answer 1

Here is Solution I made using CSS.

 * { -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; } 

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

Answer 2

Try this one:

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

});

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