使用AMIB波斯日历日期选择器时如何监听日期变更触发事件？

问题原因 #

你绑定的input、propertychange事件仅能响应用户手动输入内容的操作，日期选择器通过JS代码修改输入框值的行为，默认不会触发这类原生事件，所以你的逻辑没有执行。

解决方法 #

直接使用AMIB.persianCalendar内置的onchange回调配置即可，该回调会在用户点选日期完成后自动触发，你可以把需要执行的逻辑写在回调函数内。

修改后的完整代码如下：

<div class="col-lg-3 col-md-3 col-xs-12">
    <label for="homeWorkStartDate">From: </label>
    <input type="text" id="homeWorkStartDate" class="pdate form-control" />
    <input type="hidden" id="txtHomeWorkStartDate" />
    <script>
        var objCal1 = new AMIB.persianCalendar('homeWorkStartDate', {
            extraInputID: 'txtHomeWorkStartDate',
            extraInputFormat: 'YYYY-MM-DD',
            // 新增日期变更回调
            onchange: function() {
                alert("hi");
                // 可直接获取选中的日期值处理逻辑
                const selectedStartDate = document.getElementById('txtHomeWorkStartDate').value;
                console.log('选中的开始日期：', selectedStartDate);
            }
        });
    </script>
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
    <label for="homeWorkEndDate">To: </label>
    <input type="text" id="homeWorkEndDate" class="pdate form-control" />
    <input type="hidden" id="txtHomeWorkEndDate" />
    <script>
        // 注意：原代码两个日历实例变量名重复，这里修改为objCal2避免覆盖
        var objCal2 = new AMIB.persianCalendar('homeWorkEndDate', {
            extraInputID: 'txtHomeWorkEndDate',
            extraInputFormat: 'YYYY-MM-DD',
            onchange: function() {
                alert("hi");
                const selectedEndDate = document.getElementById('txtHomeWorkEndDate').value;
                console.log('选中的结束日期：', selectedEndDate);
            }
        });
    </script>
</div>

其他可选方案 #

如果你不方便修改日历初始化代码，也可以通过监听隐藏输入框的变化实现，代码如下：

// 监听隐藏域的属性变化
const observer = new MutationObserver(() => {
    alert("hi");
    const startDate = $('#txtHomeWorkStartDate').val();
    const endDate = $('#txtHomeWorkEndDate').val();
    console.log(startDate, endDate);
});
// 绑定两个隐藏域的value属性监听
['txtHomeWorkStartDate', 'txtHomeWorkEndDate'].forEach(id => {
    observer.observe(document.getElementById(id), {
        attributes: true,
        attributeFilter: ['value']
    });
});

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