วิธีการเปลี่ยนรูปแบบวันที่ของตัวกรองกริดผู้ดูแลระบบ magento 2 โดยไม่ใช้คอมโพเนนต์ ui

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>

— 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สำหรับปี องค์ประกอบวันที่ใช้รูปแบบวันที่ห้องไอซียู

พื้นหลัง

หากคุณสนใจว่าการกำหนดค่าแบบซ้อนได้รับไปยังตำแหน่งที่ต้องการได้อย่างไรขั้นตอนเหล่านี้คือขั้นตอน ข้อมูลทั้งหมดต่อไปนี้ใช้กับค่าที่อยู่ภายในdefaults: {}วัตถุของคลาส Javascript พา ธ ไฟล์สัมพันธ์กับ:/vendor/magento/module-ui/view/base/web/js/

ในgrid/filters/range.jsมีtemplatesตัวเลือก
ข้างในtemplatesเป็นdateที่ประกอบด้วยการกำหนดค่าสำหรับdate.jsองค์ประกอบแบบฟอร์ม
form/element/date.jsการตรวจสอบระดับของมันoptionsคุ้มค่าที่จะดูว่าdateFormatเป็นชุด
outputDateFormatและinputDateFormatทั้งสองใช้ในdate.jsองค์ประกอบแบบฟอร์ม

สุดท้ายเมื่อคุณพูดถึงว่าคุณไม่ต้องการใช้ชิ้นส่วน UI ฉันคาดว่าเป้าหมายของคุณคือหลีกเลี่ยงการขยายคลาส Javascript หรือบางเวอร์ชัน filterRangeโหนด XML เป็นการกำหนดค่าสำหรับองค์ประกอบ UI เพื่อให้มันไม่จริงใช้องค์ประกอบ UI

— bassplayer7
แหล่งที่มา

0

เพื่อเปลี่ยนรูปแบบวันที่ให้ทำตามขั้นตอนนี้

ใน grid / filters / range.js มีตัวเลือกเทมเพลต Inside templates คือวันที่ซึ่งมีการกำหนดค่าสำหรับองค์ประกอบแบบฟอร์ม date.js คลาส form / element / date.js ตรวจสอบค่าตัวเลือกเพื่อดูว่า dateFormat ตั้งค่าไว้หรือไม่ outputDateFormat และ inputDateFormat ทั้งคู่ถูกใช้ในอิลิเมนต์ฟอร์ม date.js

— Alin Lupoiu
แหล่งที่มา