Magento 2: cómo agregar el componente de la interfaz de usuario de DateTime

18

Quiero agregar un nuevo campo como fecha y hora en la sección de la página CMS al agregar una nueva página, encontré que magento usaba el componente UI para ello, por lo que después de excavar pude agregar el campo de fecha usando el código a continuación pero no pude agregar el campo de fecha y hora. ¿Alguien puede ayudar en eso?

Código para agregar campo de fecha:

<field name="start_date">
    <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">Go Live Start Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">21</item>
            <item name="dataScope" xsi:type="string">start_date</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Archivo que debemos anular para lograr:

vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_form.xml
MagentoDev
fuente
@sivakumar ¿Te ayudó mi respuesta?
Siarhey Uchukhlebau
Sí @SiarheyUchukhlebau, ayudó mucho.
MagentoDev
Posible duplicado de Magento 2 Show timepicker usando UiComponent
Teja Bhagavan Kollepara
@TejabhagavanKollepara ¿Por qué marca la pregunta hecha hace 9 meses como el duplicado de la pregunta hecha hace 4 meses?
Siarhey Uchukhlebau

Respuestas:

32

Para agregar el selector dateTime, debe usar la siguiente directiva dentro del archivo xml:

<field name="start_date">
    <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">Go Live Start Date</item>
            <item name="formElement" xsi:type="string">date</item>
            <item name="source" xsi:type="string">page</item>
            <item name="sortOrder" xsi:type="number">21</item>
            <item name="dataScope" xsi:type="string">start_date</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>
        </item>
    </argument>
</field>

Lo importante es la showsTimeopción.

El resultado debería verse así:

resultado del elemento ui de fecha y hora

Si desea depurar el elemento de la interfaz de usuario, use este comando dentro de la consola del navegador (en su página):

require('uiRegistry').get('index = start_date')

Devuelve su dateelemento con todas las opciones iniciales y todas las funciones posibles:

Objeto de elemento UI

Puede usarlos cuando defina el elemento (dentro de xml).

Como información adicional:

El elemento date(también dateTime) se puede encontrar aquí:

app/code/Magento/Ui/view/base/web/js/form/element/date.js

en los archivos estáticos:

pub/static/adminhtml/Magento/backend/en_US/Magento_Ui/js/form/element/date.js

La clase de elemento de fecha (objeto) tiene un método prepareDateTimeFormats, donde se marca la opción importante showsTime:

/**
 * Prepares and converts all date/time formats to be compatible
 * with moment.js library.
 */
prepareDateTimeFormats: function () {
    this.pickerDateTimeFormat = this.options.dateFormat;

    if (this.options.showsTime) {
        this.pickerDateTimeFormat += ' ' + this.options.timeFormat;
    }

    this.pickerDateTimeFormat = utils.normalizeDate(this.pickerDateTimeFormat);

    if (this.dateFormat) {
        this.inputDateFormat = this.dateFormat;
    }

    this.inputDateFormat = utils.normalizeDate(this.inputDateFormat);
    this.outputDateFormat = utils.normalizeDate(this.outputDateFormat);

    this.validationParams.dateFormat = this.outputDateFormat;
}
Siarhey Uchukhlebau
fuente
¿Qué sucede si solo quiero mostrar el selector de tiempo? @Siarhey
Ronak Chauhan
@RonakChauhan Necesita otro elemento personalizado porque el DateTimeelemento siempre representa la fecha.
Siarhey Uchukhlebau
pero como hacer eso?
Ronak Chauhan
@RonakChauhan Deberías extender el elemento UI abstracto y usar algo como.timepicker()
Siarhey Uchukhlebau
1
Encontrar la solución por mí mismo, su respuesta tiene un timeFormat mal , necesitamos cambiar hh:mm:ssa HH:mm:ssla interfaz de usuario Componet, de lo contrario 03:00:00 PMse convirtió 03:00:00 AM, carecen de 12 horas y usted lata no guardar la hora de la tarde en la tabla de base de datos.
Key Shang
2

Espero que esta respuesta dé una idea de lo que extrañas

Agregué el componente UI del campo de fecha y hora a través de php (funciona bien)

$fieldset->addField(
        'event_date',
        'date',
        [
            'name' => 'event_date',
            'label' => __('Date'),
            'title' => __('Date'),
            'required' => true,
            'date_format' => 'yyyy-MM-dd',
            'time_format' => 'hh:mm:ss'
        ]
);

fácil para su referencia

compare con su archivo xml todos los valores están presentes excepto date_format y time_format para que pueda intentar establecer ambos valores en su archivo xml

Para más detalles, consulte este código fuente completo

Bilal Usean
fuente
¿Puede pasar por el archivo "vendor / magento / module-cms / view / adminhtml / ui_component / cms_block_form.xml" y decirme cómo puedo integrar el código anterior?
MagentoDev
Como puedo cambiar source a mi nombre personalizado? ¿Qué requisitos hay aquí?
Vasilii Burlacu