Magento 2 Afficher timepicker en utilisant UiComponent et non Datepicker


14

Je veux afficher le timepicker dans mon formulaire UiComponent

Comme Magento Docs montre les variations qu'ils fournissent timepicker: entrez la description de l'image ici

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)



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


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


9

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:

composante temps


  • À 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).

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

2

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: entrez la description de l'image ici

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.