Magento 2 - Adicionando calendário ao formulário frontend personalizado

Question

Estou tentando adicionar o calendário no magento2 ao formulário front-end personalizado.jquery-ui.js e jquery-ui-timepicker-addon.js também são adicionados no cabeçalho e este é o código que acho que deveria funcionar para chamar o calendário.

<div class="control">
    <input type="text" class="input-text hasDatepicker" title="From" value="" id="page_from_date" name="from_date">
   <button type="button" class="ui-datepicker-trigger v-middle"><span>Select Date</span></button>                           
</div>

Não encontrei nenhum código js como Calendar.setup({ ...});etc no Magento 1 que pode ser necessário para chamar o calendário

Answer 1

Ainda não sei como reutilizar os componentes do formulário Ui no front-end, mas compartilho o código caso alguém precise usar o calendário jquery-ui.

Adicione uma entrada ao seu formulário front-end:

<input type="text" class="input-text required-entry" id="calendar_inputField" name="calendar_inputField" aria-required="true" >

e escreva este código js após a entrada:

<script>
     require([
          "jquery",
          "mage/calendar"
     ], function($){
         $("#calendar_inputField").calendar({
              buttonText:"<?php echo __('Select Date') ?>",
         });
       });
</script>

aqui está o código para usar intervalos de datas no front-end:

<div class="field overview required" data-role="filter-form" id="date_range">
     <span class="field-row">
         <label for="date_from">
            <span><?php echo __('From') ?>:</span>
         </label>
         <input class="input-text required-entry"
                 type="text"
                 id="date_from"
                 name="from"
                 />
           <span id="date_from_advice"></span>
       </span>

       <span class="field-row">
             <label for="date_to">
                <span><?php echo __('To') ?>:</span>
             </label>
             <input class="input-text required-entry"
                    type="text"
                    id="date_to"
                    name="report_to"
                    />
             <span id="date_to_advice"></span>
        </span>

        <script>
            require([
                "jquery",
                "mage/calendar"
            ], function($){

               $("#date_range").dateRange({
                 buttonText:"<?php echo __('Select Date') ?>",
                 from:{
                    id:"date_from"
                 },
                 to:{
                    id:"date_to"
                 }
               });
            });
        </script>
</div>

Para mais opções de calendário, você pode consultar lib\web\mage\calendar.js

Answer 2

A Biblioteca de UI do Magento possui muitos componentes de UI úteis organizados em 'widgets' reutilizáveis.São coisas como calendário, modal (pop-up), guias, etc.Você inicializa o widget em seu elemento e, em seguida, o widget JS cuida disso a partir daí.

Há um várias maneiras de instanciar widgets.A melhor maneira é fazê-lo em HTML através de um data-mage-init atributo.Este atributo utiliza um array JSON de widgets para criar no elemento atual, com suas opções para cada um.

<nav data-mage-init='{ "<component_name>": {...} }'></nav>

O widget de calendário especificamente é também abordado na documentação do Magento 2.

Então, experimente:

<input type="text"
        name="from_date"
        id="page-from-date"
        title="From"
        data-mage-init='{"calendar": {"showTime": false}}' />

Há também um widget dateRange, que pode ser útil dependendo do seu caso de uso.Ambos são definidos em lib/web/mage/calendar.js.De acordo com a documentação, "a maioria das opções, métodos e eventos do widget de calendário correspondem às opções do jQuery Datepicker Widget".