本文介绍如何在 input 设置为 readonly 的前提下，通过监听 Backspace/ Delete 键并调用 jQuery UI Datepicker 内置的 _clearDate() 方法，安全、简洁地清空已选日期，无需额外按钮或 DOM 改动。
本文介绍如何在 input 设置为 readonly 的前提下，通过监听 backspace/ delete 键并调用 jquery ui datepicker 内置的 `_cleardate()` 方法，安全、简洁地清空已选日期，无需额外按钮或 dom 改动。
jQuery UI Datepicker 默认不支持对只读（readonly）输入框直接清空值——用户无法聚焦编辑，也无法通过键盘删除内容。但实际业务中，常需保留只读约束（防止手动输入非法格式），同时允许用户“取消选择”。幸运的是，Datepicker 提供了未公开但稳定可用的私有方法 $.datepicker._clearDate(element)，可强制清除绑定元素的日期值并重置 UI 状态。
实现方案非常轻量：在初始化 datepicker 后，链式添加 keyup 事件监听器，仅当触发键为 Backspace（keyCode 8）或 Delete（keyCode 46）且当前 input 处于 readonly 状态时，调用 _clearDate(this)。注意，该方法接受原生 DOM 元素（而非 jQuery 对象），因此传入 this 即可。
以下是完整可运行代码示例：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<input class="datepicker" readonly type="text"><script>
$(".datepicker").datepicker({
dateFormat: 'yy-mm-dd',
yearRange: "-100:+20",
changeYear: true
}).on('keyup', function(e) {
// 仅在只读状态下响应 Backspace/Delete 键
if ($(this).is('[readonly]') && (e.keyCode === 8 || e.keyCode === 46)) {
$.datepicker._clearDate(this); // 清空日期并更新控件状态
e.preventDefault(); // 阻止默认行为（对 readonly 输入无效，但保持语义清晰）
}
});
</script>
⚠️ 注意事项：
-
_clearDate()是 jQuery UI Datepicker 的内部方法，虽自 1.8 版起长期稳定存在且被官方 issue（如 #3999）认可，但仍建议在升级 jQuery UI 后进行回归测试； -
e.preventDefault()并非必需（因readonly输入本身忽略按键输入），但显式调用可增强可维护性与预期一致性； - 该方案不修改 input 的
readonly属性，完全符合“不引入新 UI 元素”的约束，也避免了焦点管理、模拟点击等复杂逻辑。
综上，这是一种符合前端工程实践的优雅解法：利用框架已有能力，以最小侵入方式扩展交互，兼顾健壮性与简洁性。
