如何更改 P13nItem TimePicker/DatePicker 上的显示格式？

Question

当所选列类型为 date/time.

时，我正在尝试更改 sap.m.P13nItem 使用的 DatePicker/TimePicker 上的显示格式

我曾尝试更改 P13nFilterPanel 中的聚合 P13nItem 以包含属性 formatSettings，但没有成功。

这是我的 XML 查看代码的示例。

<P13nFilterPanel id="filterPanel" visible="true" type="filter" containerQuery="true" items="{
                    path: 'SchedulingFilter>/ColumnCollectionFilter'
                }" filterItems="{
                    path: 'SchedulingFilter>/FilterItems'
                }">
                <P13nItem columnKey="{SchedulingFilter>columnKey}" text="{SchedulingFilter>label}" type="{SchedulingFilter>type}" maxLength="{SchedulingFilter>maxLength}" formatSettings="{SchedulingFilter>formatSettings>" />
                <filterItems>
                    <P13nFilterItem columnKey="{SchedulingFilter>keyField}" operation="{SchedulingFilter>operation}" value1="{SchedulingFilter>value1}" value2="{SchedulingFilter>value2}" exclude="{SchedulingFilter>exclude}" />
                </filterItems>
            </P13nFilterPanel>

这是我如何填充绑定数据的摘录。

$.each(columnsKeys, function (i, item) {
            const columnData = {};
            const columnDescriptionItem = columnDescription[item];
            columnData.columnKey = item;
            columnData.text = columnDescriptionItem.label;
            columnData.type = columnDescriptionItem.type;
            columnData.formatSettings = {
                pattern: 'yyyy/MM/dd',
                UTC: false
            };
            columnData.maxLength = columnDescriptionItem.maxLength;
            columnData.visible = columnDescriptionItem.visible;
            columnData.index = columnDescriptionItem.index;
            columnData.isEditable = columnDescriptionItem.isEditable;
            columnData.isFilter = columnDescriptionItem.isFilter;
            columnData.isSorter = columnDescriptionItem.isSorter;
            columnsData.push(columnData);
        });

控件的默认行为将 time/date 字段显示为： https://ibb.co/JcJJZhJ.

编辑：我发现默认行为是基于用户的区域设置的。我没有考虑用户的语言环境来更改我应用程序其他部分的显示格式。

我想在这些字段上实现例如显示格式"yyyy/MM/dd"和"hh:mm:ss"。

Answer 1

我不得不在 SAPUI5 1.44.6 版上扩展 P13nConditionPanel（这个负责 time/date 组件实例化）和 P13nFilterPanel（它创建 P13nConditionPanel）以解决这个问题。我只需要将必要的参数添加到 DatePicker 和 TimePicker 构造函数（如下所示）。

case "date":
                oConditionGrid.oFormatter = sap.ui.core.format.DateFormat.getDateInstance();
                params.displayFormat = DateFormatter.displayFormat();
                oControl = new sap.m.DatePicker(params);
                break;
case "time":
                oConditionGrid.oFormatter = sap.ui.core.format.DateFormat.getTimeInstance();
                params.displayFormat = TimeFormatter.getDisplayFormat();
                oControl = new sap.m.TimePicker(params);

我在 pastebin 上发布了我自定义的扩展组件代码：

Customized P13nConditionPanel

Customized P13nFilterPanel

稍后我会在openui5上开一个增强请求Github。

如何更改 P13nItem TimePicker/DatePicker 上的显示格式？

How to change the display format on a P13nItem TimePicker/DatePicker?

javascript

formatting

sapui5