使用Jalali DatePicker仅需输出Gregorian格式值的问题求助

问题原因排查&解决方案 #

问题1：altField方案赋值后提交不生效 #

• 核心原因：JS直接调用val()给输入框赋值时，不会触发输入框原生的input、change事件，原系统中表单的序列化逻辑、或者残留的xdsoft datetimepicker监听逻辑依赖这些事件同步待提交数据，只有手动输入时才会触发事件，所以自动填充的值没被识别到。
• 修复方法：赋值完成后手动触发对应事件，同时提前销毁原输入框绑定的xdsoft datetimepicker实例避免冲突，修改后的逻辑如下：

// 先销毁原有日期组件实例
$('.altDue').datetimepicker('destroy');
$('#duedate.jdatepicker').persianDatepicker({
    format: "YYYY/MM/DD",
    initialValue: false,
    calendarType: "persian",
    observer: true,
    responsive: true,
    calendar: {
        persian: {
            locale: "en",
        }
    },
    onSelect: function() {
        var dataDue = $('#jalali_due.pdatepicker').val();
        var dueConv = moment.from(dataDue, 'fa', 'YYYY/MM/DD').format('YYYY-MM-DD');
        $('.altDue').val(dueConv);
        // 新增：手动触发事件，让表单逻辑识别值变更
        $('.altDue').trigger('input').trigger('change');
    }
});

问题2：直接替换Persian Datepicker方案的修复 #

你现有代码的错误点：

1. if (startData = "persian")是赋值操作，不是相等判断，应该用===
2. 没有写实际的Jalali转Gregorian的逻辑
3. 不需要判断日历类型，你已经固定了calendarType: "persian"

• 修复后的完整代码：

// 先销毁原有的xdsoft datetimepicker实例
$('#startdate.jdatepicker').datetimepicker('destroy').persianDatepicker({
    format: "YYYY/MM/DD",
    initialValue: false,
    calendarType: "persian",
    observer: true,
    responsive: true,
    calendar: {
        persian: {
            locale: "en",
        }
    },
    onSelect: function(unixTimestamp) {
        // 直接用组件返回的时间戳转Gregorian格式即可，不需要单独读值转换
        const gregorianDate = moment(unixTimestamp).format('YYYY-MM-DD');
        $('#startdate.jdatepicker').val(gregorianDate);
        // 同样触发事件同步值
        $('#startdate.jdatepicker').trigger('input').trigger('change');
    }
});

如果需要给用户展示波斯日期，实际提交存格里高利日期，更优的方案是直接用Persian Datepicker自带的altField配置，不需要自己写onSelect逻辑，配置项里指定altField对应实际提交的隐藏输入框、altFormat: 'YYYY-MM-DD'、altFieldCalendarType: 'gregorian'即可，组件会自动完成转换和赋值。

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