使用jQuery Datepicker时如何清除只读输入框的日期值？

方法1：用内置setDate方法结合双击事件 #

jQuery UI Datepicker本身提供了setDate方法，传入null就能清除输入框的日期值。因为输入框是只读状态，我们可以给它绑定双击事件触发清除操作，无需额外添加按钮：

<input class="datepicker" readonly="readonly" type="text" />

<script>
$(".datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    yearRange: "-100:+20",
    changeYear: true 
});

// 双击输入框清除已选日期
$(".datepicker").on("dblclick", function() {
    $(this).datepicker("setDate", null);
});
</script>

方法2：给Datepicker面板添加内置清除选项 #

如果希望在日历弹窗内直接提供清除入口，可以通过beforeShow事件在面板底部添加一个风格统一的清除链接，不用额外UI元素：

<input class="datepicker" readonly="readonly" type="text" />

<script>
$(".datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    yearRange: "-100:+20",
    changeYear: true,
    beforeShow: function(input, inst) {
        // 避免重复创建清除链接
        if ($("#datepicker-clear-btn").length === 0) {
            $("<div id='datepicker-clear-btn' style='padding: 3px; text-align: center; cursor: pointer; color: #212529;'>清除</div>")
                .appendTo(inst.dpDiv)
                .on("click", function() {
                    $(input).datepicker("setDate", null).datepicker("hide");
                });
        }
    }
});
</script>

方法3：绑定键盘快捷键（可选） #

如果用户习惯键盘操作，可以绑定Esc键来清除日期，同样无需额外UI：

<input class="datepicker" readonly="readonly" type="text" />

<script>
$(".datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    yearRange: "-100:+20",
    changeYear: true 
});

// 按下Esc键清除日期
$(".datepicker").on("keydown", function(e) {
    if (e.keyCode === 27) {
        $(this).datepicker("setDate", null);
    }
});
</script>

以上方案都保留了输入框的只读属性，也不会引入复杂UI元素，完全适配你的场景需求。

内容的提问来源于stack exchange，提问作者Eduardo Ponce de Leon