Composant d'interface utilisateur - affiche l'heure au format 'Ymd H: i: s' (format d'heure ISO)


9

Je crée des pages de liste d'admin par composant d'interface utilisateur, le format d'heure par défaut dans leur colonne d'heure comme ci-dessous

format d'heure par défaut

Les codes des composants de l'interface utilisateur comme ci-dessous

<column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">dateRange</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
            <item name="dataType" xsi:type="string">date</item>
            <item name="label" xsi:type="string" translate="true">Created At</item>
        </item>
    </argument>
</column>

Le format d'heure dans la base de données est correct (format d'heure ISO), c'est ce que je veux afficher.

entrez la description de l'image ici

Alors, comment afficher l'heure au format " Ymd H: i: s " (format d'heure ISO) dans le composant UI? Merci pour tout conseil :)


Puisque vous avez des questions, n'hésitez pas à me contacter. Je vais essayer de t'aider.
Siarhey Uchukhlebau

@SiarheyUchukhlebau Merci beaucoup :) Votre réponse fonctionne déjà, acceptez et votez.
Key Shang

Réponses:


11

Essayez de modifier la dateFormatvaleur de votre colonne:

<column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">dateRange</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
            <item name="dataType" xsi:type="string">date</item>
            <item name="label" xsi:type="string" translate="true">Created At</item>
            <item name="dateFormat" xsi:type="string">Y-MM-dd HH:mm:ss</item>
        </item>
    </argument>
</column>

Le format par défaut peut être trouvé dans le composant de colonne Date magento/module-ui/view/base/web/js/grid/columns/date.js

return Column.extend({
    defaults: {
        dateFormat: 'MMM d, YYYY h:mm:ss A'
    },
...

Mise à jour:

Notez également l'utilisation du y au lieu de YYYY pour l'année. Le composant date utilise le format de date ICU .

La source

Le format devrait donc être légèrement différent. Je pense que celui-ci pourrait convenir:

<item name="dateFormat" xsi:type="string">Y-MM-dd HH:mm:ss</item>

5

Vous devez ajouter la dateFormatvaleur de format de date de la colonne sous la forme AAAA-MM-jj hh: mm: ss , le format de date-heure ICU .

Jetez un œil au lien ci-dessous pour plus de détails:

http://userguide.icu-project.org/formatparse/datetime

M mois dans l'année

M 9

MM 09

MMM Sep

MMMM septembre

MMMMM S

d jour dans le mois

dd 02

Et YYYY pour l'année

Ainsi, la ligne de code de format de date est:

<item name="dateFormat" xsi:type="string" translate="true">YYYY-MM-dd hh:mm:ss</item>

Vous pouvez essayer le code ci-dessous pour votre colonne de date et vos données:

<column name="purchase_date" class="Magento\Ui\Component\Listing\Columns\Date">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Created At</item> 
            <item name="filter" xsi:type="string">dateRange</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
            <item name="dataType" xsi:type="string">date</item>
            <item name="dateFormat" xsi:type="string" translate="true">YYYY-MM-dd hh:mm a</item>
        </item>
    </argument>
 </column>

je veux afficher uniquement la date à l'aide du modificateur, mais cela ne fonctionne pas
Jaisa

<item name = "dateFormat" xsi: type = "string" translate = "true"> AAAA-MM-jj </item> Avez-vous essayé avec la ligne de code ci-dessus?
Ashish Raj
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.