Как изменить формат даты фильтра сетки magento 2 admin без использования пользовательского интерфейса?

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>
magento2 admin filter uicomponent date Jamshe
источник

Ответы:

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/

  1. В grid/filters/range.jsестьtemplates вариант.
  2. Внутри templatesнаходится dateконфигурация дляdate.js элемента формы.
  3. В form/element/date.jsпроверки класса это optionsзначение , чтобы увидеть , еслиdateFormat установлен.
  4. outputDateFormatи inputDateFormatоба используются в date.jsэлементе формы.

Наконец, когда вы упомянули, что не хотите использовать компонент пользовательского интерфейса, я предполагаю, что вашей целью было избежать расширения классов Javascript или какой-либо версии этого. Узел filterRangeXML является конфигурацией для компонента пользовательского интерфейса, поэтому он действительно использует компонент пользовательского интерфейса.

bassplayer7
источник
0

чтобы изменить формат даты, выполните следующие действия.

В grid / filters / range.js есть опция шаблонов. Внутри шаблонов находится дата, которая содержит конфигурацию для элемента формы date.js. Класс form / element / date.js проверяет значение параметра, чтобы увидеть, установлен ли dateFormat. outputDateFormat и inputDateFormat используются в элементе формы date.js.

Алин Лупою
источник