如何在Sencha ExtJS 7.5.1的DatePicker中显示佛历（泰国年）

佛历与公历的核心转换规则为：佛历年份 = 公历年份 + 543，月、日保持完全一致（如示例中公历2019-01-31对应佛历2562-01-31）。要实现DatePicker的佛历显示，需覆盖ExtJS默认的日期格式化、解析逻辑，同时调整年份选择器的显示内容，以下是具体实现方案：

方法一：自定义日期工具类（全局复用） #

先封装佛历转换的工具方法，再在DatePicker中调用：

1. 编写佛历处理工具类 #

Ext.define('MyApp.util.ThaiDate', {
    singleton: true,
    // 格式化日期为佛历
    format: function(date, format) {
        var thaiDate = new Date(date.getTime());
        // 替换格式中的年份标识，将公历年份转为佛历
        return Ext.Date.format(thaiDate, format.replace(/Y/g, () => thaiDate.getFullYear() + 543)
                                                .replace(/y/g, () => (thaiDate.getFullYear() + 543).toString().slice(-2)));
    },
    // 解析佛历日期为公历日期
    parse: function(value, format) {
        var yearMatch = value.match(/(\d{4})/);
        if (yearMatch) {
            var gregorianYear = parseInt(yearMatch[0], 10) - 543;
            value = value.replace(yearMatch[0], gregorianYear);
        }
        return Ext.Date.parse(value, format);
    }
});

2. 配置DatePicker使用工具类 #

Ext.create('Ext.picker.Date', {
    renderTo: Ext.getBody(),
    format: 'Y-m-d', // 佛历显示格式
    value: new Date(2019, 0, 31), // 初始设为公历2019-01-31
    // 重写显示值逻辑，确保显示佛历
    getDisplayValue: function() {
        var value = this.getValue();
        return value ? MyApp.util.ThaiDate.format(value, this.format) : '';
    },
    // 重写输入解析逻辑，支持佛历输入转公历存储
    parseDate: function(value) {
        return MyApp.util.ThaiDate.parse(value, this.format);
    },
    listeners: {
        select: function(picker, date) {
            console.log('佛历日期:', MyApp.util.ThaiDate.format(date, picker.format));
        }
    }
});

方法二：扩展DatePicker组件（批量复用） #

如果多个页面需要佛历选择器，直接扩展组件更高效：

1. 扩展佛历DatePicker #

Ext.define('MyApp.picker.ThaiDate', {
    extend: 'Ext.picker.Date',
    alias: 'widget.thaidatepicker',
    
    format: 'Y-m-d',
    
    // 重写显示值
    getDisplayValue: function() {
        var value = this.getValue();
        return value ? this.formatToThai(value) : '';
    },
    
    // 重写输入解析
    parseDate: function(value) {
        var yearMatch = value.match(/(\d{4})/);
        if (yearMatch) {
            var gregorianYear = parseInt(yearMatch[0], 10) - 543;
            value = value.replace(yearMatch[0], gregorianYear);
        }
        return this.callParent([value]);
    },
    
    // 自定义佛历格式化方法
    formatToThai: function(date) {
        var thaiYear = date.getFullYear() + 543;
        return `${thaiYear}-${Ext.String.leftPad(date.getMonth()+1,2,'0')}-${Ext.String.leftPad(date.getDate(),2,'0')}`;
    },
    
    // 调整年份选择器显示佛历
    createYearPicker: function() {
        var picker = this.callParent(arguments);
        picker.itemTpl = new Ext.XTemplate('<div class="x-boundlist-item">{[values.year + 543]}</div>');
        return picker;
    }
});

2. 使用扩展后的组件 #

Ext.create('MyApp.picker.ThaiDate', {
    renderTo: Ext.getBody(),
    value: new Date(2019, 0, 31),
    listeners: {
        select: function(picker) {
            console.log('选中佛历:', picker.getDisplayValue()); // 输出2562-01-31
        }
    }
});

关键注意事项 #

• 数据存储始终使用公历日期，仅在显示层转换为佛历，避免后续业务逻辑出错。
• 若需支持泰文月份名称，可在格式化方法中替换数字月份为泰文，或加载ExtJS泰语本地化包后配置对应格式。
• 测试边界日期（如公历1月1日），确保跨年转换逻辑稳定。

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