Magento 2 - Como adicionar o componente de interface do usuário DateTime

18

Eu quero adicionar um novo campo como data e hora na seção de página do CMS ao adicionar uma nova página, e descobri que o Magento estava usando o componente UI, portanto, depois de cavar, consegui adicionar o campo de data usando o código abaixo, mas não o campo de data e hora. Alguém pode ajudar nisso.

Campo Código para adicionar data:

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

Arquivo que precisamos substituir para obter:

vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_form.xml
MagentoDev
fonte
@sivakumar Se minha resposta ajudou você?
Siarhey Uchukhlebau
Sim @SiarheyUchukhlebau, ajudou muito.
MagentoDev 24/08
Possível duplicata do Magento 2 Show timepicker usando UiComponent
Teja Bhagavan Kollepara
@TejabhagavanKollepara Por que você marca a pergunta feita há 9 meses como duplicada da pergunta feita há 4 meses ?!
Siarhey Uchukhlebau

Respostas:

32

Para adicionar o seletor dateTime, você deve usar a próxima diretiva dentro do arquivo 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>

O importante é a showsTimeopção.

O resultado deve ficar assim:

resultado do elemento da interface do usuário de data e hora

Se você deseja depurar o elemento da interface do usuário - use este comando dentro do console do navegador (na sua página):

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

Ele retorna seu dateelemento com todas as opções iniciais e todas as funções possíveis:

Objeto de elemento de interface do usuário

Você pode usá-los quando definir o elemento (dentro do xml).

Como informações adicionais:

O elemento date(também dateTime) pode ser encontrado aqui:

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

nos arquivos estáticos:

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

A classe de elemento de data (objeto) possui método prepareDateTimeFormats, onde a opção importante showsTimeé marcada:

/**
 * 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
fonte
E se eu quiser mostrar apenas o seletor de horas? @Siarhey
Ronak Chauhan
@RonakChauhan Você precisa de outro elemento personalizado porque o DateTimeelemento sempre renderiza a data.
Siarhey Uchukhlebau
Mas como fazer isso?
Ronak Chauhan
@RonakChauhan Você deve estender o elemento abstrato da interface do usuário e usar algo como.timepicker()
Siarhey Uchukhlebau
11
Encontre a solução sozinho, sua resposta está com um timeFormat errado , precisamos alterar hh:mm:sspara HH:mm:ssno UI Componet, caso contrário, 03:00:00 PMficará 03:00:00 AMfaltando 12 horas e você não poderá economizar o tempo do PM na tabela do banco de dados.
Key Shang
2

Espero que esta resposta dê uma idéia do que você sente falta

Eu adicionei o componente de interface do usuário do campo de data e hora através do php (funciona bem)

$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 sua referência

compare com seu arquivo xml, todos os valores estão presentes, exceto date_format e time_format, para que você possa tentar definir os dois valores no arquivo xml

para mais detalhes, consulte este código fonte completo

Bilal Usean
fonte
Você pode acessar o arquivo "vendor / magento / module-cms / view / adminhtml / ui_component / cms_block_form.xml" e me informar como posso integrar o código acima.
MagentoDev 17/08/16
Como posso mudar sourcepara o meu nome personalizado? Quais são os requisitos aqui?
Vasilii Burlacu