清空jQuery DatePicker日期后日期格式失效问题求助

在表单中使用jQuery DatePicker时，实现清空输入框日期后，原本设置的yy-mm-dd格式会自动变回默认的mm-dd-yy，尝试在清空时重新设置格式但无效，原代码如下：

原代码 #

HTML部分 #

<li>
    <label class='wide' for="startDate">Start Date</label>
    <input class='datepicker' type='text' id='startDate' name='start_date' size='16'/>
</li>
<li>
    <input type="button" value="Clear dates" class="" id="clear-dates">
</li>

JavaScript部分 #

$(document).ready(function(){
    $(function() {
        var calDate = document.getElementById('startDate').value;
        var startDate = dateToSQL (calDate);  // 自定义日期转换函数
        $(".datepicker").datepicker({
            dateFormat: "yy-mm-dd",
            defaultDate: startDate
        });
    });
});

var $dates = $('#startDate').datepicker();

$('#clear-dates').on('click', function () {
    $dates.datepicker('setDate', null);
    $dates.datepicker.dateFormat: "yy-mm-dd",
    $(".datepicker").datepicker({
        dateFormat: "yy-mm-dd"
    });
});

问题分析及解决方案 #

问题核心在于重复初始化了DatePicker实例，并且修改格式的方式错误：

• 全局的var $dates = $('#startDate').datepicker();会重新初始化插件，且未指定格式，导致覆盖了之前的yy-mm-dd设置，使用默认的mm-dd-yy
• 清空日期时重新调用datepicker()初始化插件，会再次创建实例，进一步打乱格式设置

修正后的代码如下：

修正后的JavaScript代码 #

$(document).ready(function(){
    var calDate = document.getElementById('startDate').value;
    var startDate = dateToSQL(calDate); // 自定义日期转换函数
    // 仅初始化一次DatePicker，指定格式
    $(".datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: startDate
    });

    // 清空按钮点击事件
    $('#clear-dates').on('click', function () {
        // 直接清空日期，保留初始化时的格式设置
        $(".datepicker").datepicker('setDate', null);
        
        // 若仍出现格式异常，可通过option方法强制设置格式（一般无需这一步）
        // $(".datepicker").datepicker('option', 'dateFormat', 'yy-mm-dd');
    });
});

关键说明 #

1. 确保只初始化一次DatePicker，所有配置（包括dateFormat）在首次初始化时完成
2. 清空日期使用datepicker('setDate', null)即可，该操作不会改变已设置的日期格式
3. 如需修改已有实例的配置，使用datepicker('option', '配置项', '值')的方式，而非重新初始化

内容的提问来源于stack exchange，提问作者Tim Dawson