Wie ändere ich das Datumsformat des Magento 2 Admin-Grid-Filters, ohne die UI-Komponente zu verwenden?

14

Unten ist some_grid_block.xml,

Wie kann ich das Datumsformat im Kalenderfilter ändern? 

 <?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
quelle

Antworten:

14

Das Folgende ist die XML-Konfiguration, die wie beabsichtigt funktionieren sollte:

<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>

Einige Informationen zur obigen Konfiguration:

  • dateFormat(in options) ist das Format, das über die Datumsauswahl in das Filterfeld eingegeben wird.
  • inputDateFormat ist das Format des Datums, das vom Server kommt
  • outputDateFormat ist das Format des Datums, das an den Server gesendet wird.

Abhängig davon, wie das Datum formatiert ist, brauchen Sie es möglicherweise nicht inputDateFormat, obwohl ich nicht sicher bin, ob es weh tun würde, es zu haben. Wenn Sie festlegen dateFormat, müssen Sie wahrscheinlich inputDateFormataufgrund der Art und Weise, wie die Filter behandelt werden , ebenfalls festlegen .

Beachten Sie auch die Verwendung von yanstelle von YYYYfür das Jahr. Die Datumskomponente verwendet das ICU-Datumsformat .

Hintergrund

Wenn Sie sich dafür interessieren, wie die verschachtelte Konfiguration tatsächlich dahin gelangt, wo sie benötigt wird, sind dies die Schritte. Alle folgenden Punkte gelten für Werte innerhalb des defaults: {}Objekts der Javascript-Klasse. Die Dateipfade sind relativ zu:/vendor/magento/module-ui/view/base/web/js/

  1. In grid/filters/range.jsgibt es eine templatesOption.
  2. Im Inneren templatesbefindet sich datedie Konfiguration für das date.jsFormularelement.
  3. Die form/element/date.jsKlasse überprüft ihren optionsWert, um festzustellen, ob sie dateFormatgesetzt ist.
  4. outputDateFormatund inputDateFormatwerden beide im date.jsFormularelement verwendet.

Als Sie schließlich erwähnt haben, dass Sie keine UI-Komponente verwenden möchten, gehe ich davon aus, dass Ihr Ziel darin bestand, das Erweitern von Javascript-Klassen oder eine Version davon zu vermeiden. Der filterRangeXML-Knoten ist eine Konfiguration für eine UI-Komponente, sodass tatsächlich eine UI-Komponente verwendet wird.

Bassist7
quelle
0

Befolgen Sie diese Schritte, um das Datumsformat zu ändern

In grid / filters / range.js gibt es eine Vorlagenoption. Innerhalb der Vorlagen befindet sich das Datum, das die Konfiguration für das Formularelement date.js enthält. Die Klasse form / element / date.js überprüft den Optionswert, um festzustellen, ob dateFormat festgelegt ist. outputDateFormat und inputDateFormat werden beide im Formularelement date.js verwendet.

Alin Lupoiu
quelle