¿Cómo cambiar el formato de fecha del filtro de cuadrícula de administración de magento 2 sin usar el componente ui?

14

A continuación es some_grid_block.xml,

¿Cómo puedo cambiar el formato de fecha en el filtro de calendario? 

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

Respuestas:

14

La siguiente es la configuración XML que debería funcionar como se pretendía:

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

Alguna información sobre la configuración anterior:

  • dateFormat (en options ) es el formato que se ingresa en el campo de filtro desde el Selector de fecha.
  • inputDateFormat es el formato de la fecha que proviene del servidor
  • outputDateFormat es el formato de la fecha que se envía al servidor.

Dependiendo de cómo se formatee la fecha, es posible que no la necesite inputDateFormat, aunque no estoy seguro de que le haga daño tenerla. Si configura dateFormat, probablemente tendrá que configurarinputDateFormat también debido a la forma en que se manejan los filtros.

Además, observe el uso de en ylugar de YYYYpara el año. El componente de fecha utiliza el formato de fecha de ICU .

Antecedentes

Si está interesado en cómo la configuración anidada llega realmente a donde debe ir, estos son los pasos. Todo lo siguiente se aplica a los valores dentro del defaults: {}objeto de la clase Javascript. Las rutas de archivo son relativas a:/vendor/magento/module-ui/view/base/web/js/

  1. En grid/filters/range.jshay untemplates opción.
  2. Inside templateses el dateque contiene la configuración para eldate.js elemento de formulario.
  3. La form/element/date.jsclase verifica su optionsvalor para ver sidateFormat está configurado.
  4. outputDateFormaty inputDateFormatambos se usan en el date.jselemento de formulario.

Finalmente, cuando mencionó que no deseaba usar un Componente de interfaz de usuario, supongo que su objetivo era evitar extender las clases de Javascript, o alguna versión de eso. El filterRangenodo XML es la configuración de un componente de la interfaz de usuario, por lo que en realidad usa un componente de la interfaz de usuario.

bassplayer7
fuente
0

para cambiar el formato de fecha, siga estos pasos

En grid / filters / range.js hay una opción de plantillas. Dentro de las plantillas está la fecha que contiene la configuración para el elemento de formulario date.js. La clase form / element / date.js verifica su valor de opciones para ver si dateFormat está configurado. outputDateFormat y inputDateFormat se usan en el elemento de formulario date.js.

Alin Lupoiu
fuente