Magento 2 Afficher timepicker en utilisant UiComponent et non Datepicker

Je veux afficher le timepicker dans mon formulaire UiComponent

Comme Magento Docs montre les variations qu'ils fournissent timepicker:

Je veux cela en utilisant UiComponent dans mon formulaire.

Remarque: Vous devez afficher l'heure du programme afin qu'aucune date ne soit nécessaire.

Référence vérifiée: Comment ajouter un sélecteur de plage de temps au formulaire adminhtml dans Magento 2? (Mais son bloc d'utilisation, je veux utiliser UiComponent)

magento-2.1 uicomponent time Ronak Chauhan
la source

avez-vous vérifié magento.stackexchange.com/questions/130985/… ?

Vishwas Bhatnagar

oui, je ne veux que le calendrier Time not date.

Ronak Chauhan

Copie possible de Magento 2 - Comment ajouter le composant d'interface utilisateur DateTime

Teja Bhagavan Kollepara

Je veux seulement l'heure et non la date, donc ce n'est pas une question en double @teja bhagavan Kollepara

Ronak Chauhan

@TejabhagavanKollepara Veuillez lire attentivement toutes les questions avant de les marquer comme homologues.

Siarhey Uchukhlebau

Réponses:

Vous devez "créer" * votre propre composant d'interface utilisateur. Vous pouvez le faire en étendant le composant d'interface utilisateur Date.

# 1 Ajoutez le XML à votre formulaire

Ajoutez le champ au jeu de champs. Dans cet exemple, le composant que nous allons créer est appelé time. Notez que vous pouvez déclarer un templatedans le XML suivant. Cependant, cela ne fera vraiment aucun bien car c'est le modèle XHTML qui encapsulera le modèle Knockout qui fait le rendu réel. Il existe d'autres nœuds que vous pouvez déclarer ici comme la validation.

<field name="time_field">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Time</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="dataScope" xsi:type="string">time_field</item>
            <item name="component" xsi:type="string">Your_Module/js/form/element/time</item>
        </item>
    </argument>
</field>

# 2 Créez le composant UI

// app/code/Your/Module/view/adminhtml/web/js/form/element/time.js

define([
    'Magento_Ui/js/form/element/date'
], function(Date) {
    'use strict';

    return Date.extend({
        defaults: {
            options: {
                showsDate: false,
                showsTime: true,
                timeOnly: true
            },

            elementTmpl: 'ui/form/element/date'
        }
    });
});

Quelques notes sur le Javascript ci-dessus:

elementTmpln'est pas nécessaire. Cependant, si vous souhaitez personnaliser le modèle (actuellement module-ui/view/base/web/templates/form/element/date.html), créez simplement votre propre modèle et référencez-le avec elementTmpl.

Il y a plus d'options pour l'entrée. Vous pouvez en savoir plus à leur sujet: http://trentrichardson.com/examples/timepicker/#tp-options . Dans le code, il y a une liste de toutes les valeurs par défaut ici:/lib/web/jquery/jquery-ui-timepicker-addon.js

Résultat final:

À ce stade, je ne pense pas qu'il soit possible de déclarer votre propre composant d'interface utilisateur d'une manière similaire à celle de definitions.xml. Cependant, vous pouvez les étendre avec un minimum d'effort. (Et, s'il y a un moyen, faites-le moi savoir).

bassplayer7
la source

@John, les composants d'interface utilisateur n'existent pas dans Magento 1. Mais c'est Magento <= 2.1. Magento 2.2 a apporté quelques modifications aux attentes du schéma. Je pourrai peut-être ajouter une note à ce sujet, mais si vous déterminez le schéma Magento 2.2, veuillez poster.

bassplayer7

Vous pouvez simplement utiliser ce code xml pour le même résultat que ci-dessus:

<field name="opening_time">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">string</item>
            <item name="label" xsi:type="string" translate="true">Opening time</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">70</item>
            <item name="dataScope" xsi:type="string">opening_time</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="options" xsi:type="array">
                <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
                <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
                <item name="showsTime" xsi:type="boolean">true</item>
                <item name="timeOnly" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Résultat:

Sergey Uskov
la source