如何在不使用ui组件的情况下更改magento 2管理网格过滤器的日期格式？

14

下面some_grid_block.xml，

如何更改日历过滤器中的日期格式。

 <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="adminhtml.qrcode.grid.container">
            <block class="Oneteam\Qrcode\Block\Grid" name="adminhtml.qrcode.grid" as="grid">
                <arguments>
                    <argument name="id" xsi:type="string">QrcodeGrid</argument>
                    <argument name="dataSource" xsi:type="object">Oneteam\Qrcode\Model\ResourceModel\Qrcode\Collection</argument>
                    <argument name="default_sort" xsi:type="string">qr_id</argument>
                    <argument name="default_dir" xsi:type="string">desc</argument>
                </arguments>
                <block class="Magento\Backend\Block\Widget\Grid\Column\Filter\Date">
                    <filterRange name="created_at"  class="Magento\Backend\Block\Widget\Grid\Column\Filter\Date">
                        <argument name="data" xsi:type="array">
                            <item name="config" xsi:type="array">
                                <item name="dataScope" xsi:type="string">created_at</item>
                                <item name="label" xsi:type="string" translate="true">Created</item>
                            </item>
                        </argument>
                        <filterDate name="from">
                            <argument name="data" xsi:type="array">
                                <item name="config" xsi:type="array">
                                    <item name="dataScope" xsi:type="string">from</item>
                                    <item name="label" xsi:type="string" translate="true">From</item>
                                    <item name="placeholder" xsi:type="string" translate="true">From</item>
                                    <item name="dateFormat" xsi:type="string" translate="true">dd/MM/YYYY</item>
                                </item>
                            </argument>
                        </filterDate>
                        <filterDate name="to">
                            <argument name="data" xsi:type="array">
                                <item name="config" xsi:type="array">
                                    <item name="dataScope" xsi:type="string">to</item>
                                    <item name="label" xsi:type="string" translate="true">To</item>
                                    <item name="placeholder" xsi:type="string" translate="true">To</item>
                                    <item name="dateFormat" xsi:type="string" translate="true">dd/MM/YYYY</item>
                                </item>
                            </argument>
                        </filterDate>
                    </filterRange>
                </block>
                <block class="Magento\Backend\Block\Widget\Grid\ColumnSet" as="grid.columnSet" name="qrcode.grid.columnSet">
                    <arguments>
                        <argument name="id" xsi:type="string">QrcodeGrid</argument>
                        <argument name="rowUrl" xsi:type="array">
                            <item name="generatorClass" xsi:type="string">Magento\Backend\Model\Widget\Grid\Row\UrlGenerator</item>
                            <item name="path" xsi:type="string">*/*/edit</item>
                            <item name="extraParamsTemplate" xsi:type="array">
                                <item name="qr_id" xsi:type="string">getId</item>
                            </item>
                        </argument>
                    </arguments>
                    <block class="Magento\Backend\Block\Widget\Grid\Column" as="qr_id">
                        <arguments>
                            <argument name="header" xsi:type="string" translate="true">ID</argument>
                            <argument name="sortable" xsi:type="string">true</argument>
                            <argument name="index" xsi:type="string">qr_id</argument>
                            <argument name="column_css_class" xsi:type="string">col-id</argument>
                            <argument name="header_css_class" xsi:type="string">col-id</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Backend\Block\Widget\Grid\Column" as="qr_code">
                        <arguments>
                            <argument name="header" xsi:type="string" translate="true">QR Code</argument>
                            <argument name="type" xsi:type="string">text</argument>
                            <argument name="index" xsi:type="string">qr_code</argument>
                            <argument name="escape" xsi:type="string">1</argument>
                            <argument name="column_css_class" xsi:type="string">col-name</argument>
                            <argument name="header_css_class" xsi:type="string">col-name</argument>
                        </arguments>
                    </block>

                    <block class="Magento\Backend\Block\Widget\Grid\Column" as="qr_status">
                        <arguments>
                            <argument name="header" xsi:type="string" translate="true">QR Code Status</argument>
                            <argument name="type" xsi:type="string">text</argument>
                            <argument name="index" xsi:type="string">qr_status</argument>
                            <argument name="escape" xsi:type="string">1</argument>
                            <argument name="column_css_class" xsi:type="string">col-name</argument>
                            <argument name="header_css_class" xsi:type="string">col-name</argument>
                        </arguments>
                    </block>
            <block class="Magento\Backend\Block\Widget\Grid\Column" as="binggz_value">
                        <arguments>
                            <argument name="header" xsi:type="string" translate="true">Number of Binggz</argument>
                            <argument name="type" xsi:type="string">text</argument>
                            <argument name="index" xsi:type="string">binggz_value</argument>
                            <argument name="renderer" xsi:type="string">Oneteam\Qrcode\Block\Widget\Grid\Column\Renderer\Binggz</argument>
                            <argument name="escape" xsi:type="string">1</argument>
                            <argument name="column_css_class" xsi:type="string">col-name</argument>
                            <argument name="header_css_class" xsi:type="string">col-name</argument>
                        </arguments>
                    </block>

                    <block class="Magento\Backend\Block\Widget\Grid\Column" as="customer_username">
                        <arguments>
                            <argument name="header" xsi:type="string" translate="true">Customer Name</argument>
                            <argument name="type" xsi:type="string">text</argument>
                            <argument name="index" xsi:type="string">customer_username</argument>
                            <argument name="escape" xsi:type="string">1</argument>
                            <argument name="column_css_class" xsi:type="string">col-name</argument>
                            <argument name="header_css_class" xsi:type="string">col-name</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Backend\Block\Widget\Grid\Column" as="created_date">
                        <arguments>
                            <argument name="header" xsi:type="string" translate="true">Created Date</argument>
                            <argument name="type" xsi:type="string">date</argument>
                            <argument name="index" xsi:type="string">created_date</argument>
                            <argument name="format" xsi:type="string" translate="true">dd-MM-YYYY HH:MM:SS</argument>
                            <argument name="column_css_class" xsi:type="string">col-name</argument>
                            <argument name="header_css_class" xsi:type="string">col-name</argument>
                        </arguments>
                    </block>

                </block>
            </block>
        </referenceBlock>
    </body>
    </page>

— 贾姆谢
source

14

以下是应按预期工作的XML配置：

<filterRange name="created_at" class="Magento\Backend\Block\Widget\Grid\Column\Filter\Date">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="templates" xsi:type="array">
                <item name="date" xsi:type="array">
                    <item name="options" xsi:type="array">
                        <item name="dateFormat" xsi:type="string">dd/MM/y</item>
                    </item>
                    <item name="outputDateFormat" xsi:type="string">dd/MM/y</item>
                    <item name="inputDateFormat" xsi:type="string">dd/MM/y</item>
                </item>
            </item>
        </item>
    </argument>
</filterRange>

有关上述配置的一些信息：

dateFormat（中的options）是从日期选择器输入到过滤器字段的格式。
inputDateFormat 是来自服务器的日期格式
outputDateFormat 是发送到服务器的日期格式。

根据日期的格式，您可能不需要inputDateFormat，尽管我不确定使用它会不会很痛。如果设置dateFormat，则inputDateFormat由于过滤器的处理方式，可能还需要设置。

另外，请注意使用y代替YYYY年份。日期组件使用ICU日期格式。

背景

如果您对嵌套配置实际如何到达所需位置感兴趣，请按照以下步骤操作。以下所有内容均适用于defaults: {}Javascript类的对象内部的值。文件路径是相对于：/vendor/magento/module-ui/view/base/web/js/

在grid/filters/range.js里面有一个templates选择。
内部templates是date其中包含date.jsform元素的配置。
本form/element/date.js类检查它的options，看值，如果dateFormat设置。
outputDateFormat和inputDateFormat都在date.jsform元素中使用。

最后，当您提到不想使用UI组件时，我假设您的目标是避免扩展Javascript类或该类的某些版本。该filterRangeXML节点是一个UI组件配置，以便它并实际使用的UI组件。

— bassplayer7
source

0

更改日期格式，请按照以下步骤操作

在grid / filters / range.js中，有一个模板选项。模板内部是date，其中包含date.js表单元素的配置。form / element / date.js类检查其选项值以查看是否设置了dateFormat。在date.js表单元素中都使用了outputDateFormat和inputDateFormat。

— 阿林·卢波尤（Alin Lupoiu）
source