How to implement Time Range Picker in Magento 2 Admin system.xml? The 2019 Stack Overflow Developer Survey Results Are In Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)Date field system.xmlMagento 2 - time picker on backend (xml form)How to overwrite System.xml?Magento 2 Pattern Library — Date & Time SelectorsHTTP 500 Error in System ConfigurationMagento 2 - time picker on backend (xml form)Magento 2 Add Datetime picker in system.xmlDate Time picker and time zone woesHow to implement Single Date and Time Picker in Magento 2Custom Module for Custom Column using Plugin Yes/No optionMagento 2 DateTime picker - Limit time selection rangeMagento2 UI Component admin Grid / Listing stuck loading

Did the UK government pay "millions and millions of dollars" to try to snag Julian Assange?

What's the point in a preamp?

Is every episode of "Where are my Pants?" identical?

Difference between "generating set" and free product?

"... to apply for a visa" or "... and applied for a visa"?

Is there a writing software that you can sort scenes like slides in PowerPoint?

Derivation tree not rendering

ELI5: Why do they say that Israel would have been the fourth country to land a spacecraft on the Moon and why do they call it low cost?

How to test the equality of two Pearson correlation coefficients computed from the same sample?

how can a perfect fourth interval be considered either consonant or dissonant?

How to delete random line from file using Unix command?

What force causes entropy to increase?

Why is the object placed in the middle of the sentence here?

University's motivation for having tenure-track positions

Can a novice safely splice in wire to lengthen 5V charging cable?

Did God make two great lights or did He make the great light two?

Can the DM override racial traits?

Is above average number of years spent on PhD considered a red flag in future academia or industry positions?

does high air pressure throw off wheel balance?

Why can't devices on different VLANs, but on the same subnet, communicate?

What are these Gizmos at Izaña Atmospheric Research Center in Spain?

Is it ok to offer lower paid work as a trial period before negotiating for a full-time job?

Finding the path in a graph from A to B then back to A with a minimum of shared edges

In horse breeding, what is the female equivalent of putting a horse out "to stud"?



How to implement Time Range Picker in Magento 2 Admin system.xml?



The 2019 Stack Overflow Developer Survey Results Are In
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)Date field system.xmlMagento 2 - time picker on backend (xml form)How to overwrite System.xml?Magento 2 Pattern Library — Date & Time SelectorsHTTP 500 Error in System ConfigurationMagento 2 - time picker on backend (xml form)Magento 2 Add Datetime picker in system.xmlDate Time picker and time zone woesHow to implement Single Date and Time Picker in Magento 2Custom Module for Custom Column using Plugin Yes/No optionMagento 2 DateTime picker - Limit time selection rangeMagento2 UI Component admin Grid / Listing stuck loading



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








1















I found one similar solution that almost does what I want.
DateTimePicker System.xml



I have implemented its code and was able to display a DateTime Picker in my admin configuration. However, I would like to implement a Time Range Picker but I don't need a UI component way of implementing it.










share|improve this question






























    1















    I found one similar solution that almost does what I want.
    DateTimePicker System.xml



    I have implemented its code and was able to display a DateTime Picker in my admin configuration. However, I would like to implement a Time Range Picker but I don't need a UI component way of implementing it.










    share|improve this question


























      1












      1








      1


      2






      I found one similar solution that almost does what I want.
      DateTimePicker System.xml



      I have implemented its code and was able to display a DateTime Picker in my admin configuration. However, I would like to implement a Time Range Picker but I don't need a UI component way of implementing it.










      share|improve this question
















      I found one similar solution that almost does what I want.
      DateTimePicker System.xml



      I have implemented its code and was able to display a DateTime Picker in my admin configuration. However, I would like to implement a Time Range Picker but I don't need a UI component way of implementing it.







      magento2.3 system.xml datepicker timepicker






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited yesterday







      magefms

















      asked Apr 10 at 6:13









      magefmsmagefms

      2,6492528




      2,6492528




















          3 Answers
          3






          active

          oldest

          votes


















          1














          If you wish to add time from/to elements as a slider, you can customize an element frontend model and add your own template.



          How it will be looking



          Here is my example (ported from the regular form to the store configuration section):



          Field in the system.xml:



          <field id="delivery_time" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
          <label>Delivery Time</label>
          <frontend_model>MageWorxExampleConfigModelConfigFrontendModelDeliveryTime</frontend_model>
          </field>


          Note: real values will be stored with the delivery_time_from and delivery_time_to indexes.



          Frontend model, where I have replaced the default output of the element:



          <?php

          namespace MageWorxExampleConfigModelConfigFrontendModel;


          class DeliveryTime extends MagentoConfigBlockSystemConfigFormField

          /**
          * Retrieve element HTML markup
          *
          * @param MagentoFrameworkDataFormElementAbstractElement $element
          * @return string
          * @throws MagentoFrameworkExceptionLocalizedException
          */
          protected function _getElementHtml(MagentoFrameworkDataFormElementAbstractElement $element)

          $renderer = $this->getLayout()->createBlock(
          'MageWorxExampleConfigBlockTimeSlider'
          );
          $renderer->setElement($element);

          return $renderer->toHtml();




          here we just using a block MageWorxExampleConfigBlockTimeSlider instead of general render.



          And here is the block with template (where slider was defined):



          <?php

          namespace MageWorxExampleConfigBlock;

          use MagentoFrameworkDataFormElementAbstractElement;

          /**
          * Class TimeSlider
          */
          class TimeSlider extends MagentoFrameworkViewElementTemplate implements
          MagentoFrameworkDataFormElementRendererRendererInterface,
          MagentoWidgetBlockBlockInterface


          const TIME_NAME_FROM = 'groups[main][fields][delivery_time_from][value]';
          const TIME_NAME_TO = 'groups[main][fields][delivery_time_to][value]';

          /**
          * Form element which re-rendering
          *
          * @var MagentoFrameworkDataFormElementFieldset
          */
          protected $element;

          /**
          * @var string
          */
          protected $_template = 'MageWorx_ExampleConfig::form/renderer/timeslider.phtml';

          /**
          * @var string
          */
          protected $_htmlId = 'time-range';

          /**
          * Retrieve an element
          *
          * @return MagentoFrameworkDataFormElementFieldset
          */
          public function getElement()

          return $this->element;


          /**
          * Set an element
          *
          * @param AbstractElement $element
          * @return $this
          */
          public function setElement(MagentoFrameworkDataFormElementAbstractElement $element)

          $this->element = $element;

          return $this;


          /**
          * Render element
          *
          * @param AbstractElement $element
          * @return string
          */
          public function render(AbstractElement $element)

          $this->element = $element;

          return $this->toHtml();


          /**
          * @return string
          */
          public function getHtmlId()

          return $this->_htmlId;


          /**
          * @return string
          */
          public function getNameFrom()

          return self::TIME_NAME_FROM;


          /**
          * @return string
          */
          public function getNameTo()

          return self::TIME_NAME_TO;


          /**
          * @param int $minutes
          * @return string
          */
          public function minutesToTime($minutes)

          $hours = floor($minutes / 60);
          $minutes = $minutes % 60;
          $part = $hours >= 12 ? 'PM' : 'AM';

          return sprintf('%02d:%02d %s', $hours, $minutes, $part);


          /**
          * @return string
          * @throws MagentoFrameworkExceptionValidatorException
          */
          protected function _toHtml()

          if (!$this->getTemplate())
          return '';


          return $this->fetchView($this->getTemplateFile());




          Note: you should change values of the constants TIME_NAME_FROM and TIME_NAME_TO to own ones, according your definition in the system.xml.



          Template:



          <?php

          /** @var MageWorxExampleConfigBlockTimeSlider $block */
          $element = $block->getElement();
          $form = $element->getForm();
          /** @var MagentoConfigBlockSystemConfigForm $parentForm */
          $parentForm = $form->getParent();
          $timeFrom = $parentForm->getConfigValue('example_config/main/delivery_time_from');;
          $timeTo = $parentForm->getConfigValue('example_config/main/delivery_time_to');;
          ?>
          <div id="time-range" class="field field-time_range">
          <label class="label" style="white-space: normal;">
          <?php echo __('Time Range: ');?>
          <span class="slider-time">
          <?php echo $block->minutesToTime($timeFrom);?>
          </span>
          <?php echo ' - '; ?>
          <span class="slider-time2">
          <?php echo $block->minutesToTime($timeTo);?>
          </span>
          </label>
          <div class="sliders_step1 control">
          <div id="slider-range"></div>
          <input type="hidden"
          name="<?php echo $block->getNameFrom();?>"
          value="<?php echo $timeFrom?>""
          />
          <input type="hidden"
          name="<?php echo $block->getNameTo();?>"
          value="<?php echo $timeTo?>""
          />
          </div>
          </div>
          <script type="text/javascript">
          require(['jquery', 'jquery/ui'], function($)
          $("#slider-range").slider(
          range: true,
          min: 0,
          max: 1440,
          step: 15,
          values: [<?php echo $timeFrom?>, <?php echo $timeTo?>],
          slide: function (e, ui)
          var hours1 = Math.floor(ui.values[0] / 60);
          var minutes1 = ui.values[0] - (hours1 * 60);

          if (hours1.length == 1) hours1 = '0' + hours1;
          if (minutes1.length == 1) minutes1 = '0' + minutes1;
          if (minutes1 == 0) minutes1 = '00';
          if (hours1 >= 12)
          if (hours1 == 12)
          hours1 = hours1;
          minutes1 = minutes1 + " PM";
          else
          hours1 = hours1 - 12;
          minutes1 = minutes1 + " PM";

          else
          hours1 = hours1;
          minutes1 = minutes1 + " AM";

          if (hours1 == 0)
          hours1 = 12;
          minutes1 = minutes1;



          $('.slider-time').html(hours1 + ':' + minutes1);

          var hours2 = Math.floor(ui.values[1] / 60);
          var minutes2 = ui.values[1] - (hours2 * 60);

          if (hours2.length == 1) hours2 = '0' + hours2;
          if (minutes2.length == 1) minutes2 = '0' + minutes2;
          if (minutes2 == 0) minutes2 = '00';
          if (hours2 >= 12)
          if (hours2 == 12)
          hours2 = hours2;
          minutes2 = minutes2 + " PM";
          else if (hours2 == 24)
          hours2 = 11;
          minutes2 = "59 PM";
          else
          hours2 = hours2 - 12;
          minutes2 = minutes2 + " PM";

          else
          hours2 = hours2;
          minutes2 = minutes2 + " AM";


          $('.slider-time2').html(hours2 + ':' + minutes2);
          $('[name="<?php echo $block->getNameFrom();?>"]').val(ui.values[0]);
          $('[name="<?php echo $block->getNameTo();?>"]').val(ui.values[1]);

          );
          );
          </script>


          That's all. Based on this example you can modify code to add base features like a use global value etc.



          Here is full code on the GitHub.



          PS: Example partially taken from the Shipping Suite Ultimate Extension by MageWorx (where that kind of slider used in the form).



          PPS: in the example time stored in the database in minutes, like 120 => 2:00 AM.






          share|improve this answer






























            2














            I would suggest to use the same way magento uses for saving time.



            In your admin panel, goto




            Stores -> Configuration -> Advanced -> System -> Scheduled Backup Settings




            See the Start Time field.



            enter image description here



            You may use the same thing in your system.xml file. It seems more accurate.



            Let me know if you need a code sample for that. I have used the same in one of my module.





            etc/adminhtml/system.xml





            <field id="opening_time" translate="label" type="time" showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="40">
            <label>Opening Time</label>
            </field>


            Just add above field in system.xml and it will work as per magento standard. It will save time like 15,25,00. The type='time' makes it work. Thats it. No additional coding is needed.






            share|improve this answer

























            • can you include code for this one so that I can check

              – magefms
              Apr 10 at 7:50











            • Edited answer with the code. Please check.

              – Yash Shah
              Apr 10 at 7:54











            • okay, I will update you if it works

              – magefms
              Apr 10 at 7:54


















            1














            You can follow steps below to show Datetime field in your custom module admin config section



            step 1) Create system.xml under ***app/code/Vendor/Module/etc/adminFile:*



            File : app/code/Vendor/MyModule/etc/adminhtml/system.xml



            <?xml version="1.0"?>

            <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
            <system>
            <tab id="mycustom" translate="label" sortOrder="450">
            <label>My Custom Setting</label>
            </tab>
            <section id="mycustom" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>My Custom Setting</label>
            <tab>mycustom</tab>
            <resource>Magento_Checkout::config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <field id="mydate" translate="label" type="date" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>My Date Field</label>
            <frontend_model>VendorMyModuleBlockAdminhtmlSystemConfigDateTime</frontend_model>
            </field>
            </group>
            </section>
            </system>
            </config>


            step 2) Create the block DateTime.php under /app/code/Vendor/MyModule/Block/Adminhtml/System/Config/DateTime.php



            File : /app/code/Vendor/MyModule/Block/Adminhtml/System/Config/DateTime.php



            <?php

            namespace VendorMyModuleBlockAdminhtmlSystemConfig;

            class DateTime extends MagentoConfigBlockSystemConfigFormField


            protected $timezone;

            public function __construct(
            MagentoBackendBlockTemplateContext $context,
            MagentoFrameworkStdlibDateTimeTimezoneInterface $timezone,
            array $data = []
            )
            $this->timezone = $timezone;
            parent::__construct($context, $data);


            public function render(MagentoFrameworkDataFormElementAbstractElement $element)

            $element->setDateFormat($this->timezone->getDateFormat());
            $element->setTimeFormat($this->timezone->getTimeFormat());
            $element->setShowsTime(true);
            return parent::render($element);




            step 3: Run Following commands



            sudo php bin/magento setup:di:compile
            sudo php bin/magento cache:flush


            step 4: Check your custom module admin config section for newly added datetime config field.



            enter image description here






            share|improve this answer























            • Thanks for the answer bro, but I have done that already, please review my requirement, I need time picker only.

              – magefms
              Apr 10 at 7:10











            Your Answer








            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "479"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: false,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f269454%2fhow-to-implement-time-range-picker-in-magento-2-admin-system-xml%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            3 Answers
            3






            active

            oldest

            votes








            3 Answers
            3






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            If you wish to add time from/to elements as a slider, you can customize an element frontend model and add your own template.



            How it will be looking



            Here is my example (ported from the regular form to the store configuration section):



            Field in the system.xml:



            <field id="delivery_time" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
            <label>Delivery Time</label>
            <frontend_model>MageWorxExampleConfigModelConfigFrontendModelDeliveryTime</frontend_model>
            </field>


            Note: real values will be stored with the delivery_time_from and delivery_time_to indexes.



            Frontend model, where I have replaced the default output of the element:



            <?php

            namespace MageWorxExampleConfigModelConfigFrontendModel;


            class DeliveryTime extends MagentoConfigBlockSystemConfigFormField

            /**
            * Retrieve element HTML markup
            *
            * @param MagentoFrameworkDataFormElementAbstractElement $element
            * @return string
            * @throws MagentoFrameworkExceptionLocalizedException
            */
            protected function _getElementHtml(MagentoFrameworkDataFormElementAbstractElement $element)

            $renderer = $this->getLayout()->createBlock(
            'MageWorxExampleConfigBlockTimeSlider'
            );
            $renderer->setElement($element);

            return $renderer->toHtml();




            here we just using a block MageWorxExampleConfigBlockTimeSlider instead of general render.



            And here is the block with template (where slider was defined):



            <?php

            namespace MageWorxExampleConfigBlock;

            use MagentoFrameworkDataFormElementAbstractElement;

            /**
            * Class TimeSlider
            */
            class TimeSlider extends MagentoFrameworkViewElementTemplate implements
            MagentoFrameworkDataFormElementRendererRendererInterface,
            MagentoWidgetBlockBlockInterface


            const TIME_NAME_FROM = 'groups[main][fields][delivery_time_from][value]';
            const TIME_NAME_TO = 'groups[main][fields][delivery_time_to][value]';

            /**
            * Form element which re-rendering
            *
            * @var MagentoFrameworkDataFormElementFieldset
            */
            protected $element;

            /**
            * @var string
            */
            protected $_template = 'MageWorx_ExampleConfig::form/renderer/timeslider.phtml';

            /**
            * @var string
            */
            protected $_htmlId = 'time-range';

            /**
            * Retrieve an element
            *
            * @return MagentoFrameworkDataFormElementFieldset
            */
            public function getElement()

            return $this->element;


            /**
            * Set an element
            *
            * @param AbstractElement $element
            * @return $this
            */
            public function setElement(MagentoFrameworkDataFormElementAbstractElement $element)

            $this->element = $element;

            return $this;


            /**
            * Render element
            *
            * @param AbstractElement $element
            * @return string
            */
            public function render(AbstractElement $element)

            $this->element = $element;

            return $this->toHtml();


            /**
            * @return string
            */
            public function getHtmlId()

            return $this->_htmlId;


            /**
            * @return string
            */
            public function getNameFrom()

            return self::TIME_NAME_FROM;


            /**
            * @return string
            */
            public function getNameTo()

            return self::TIME_NAME_TO;


            /**
            * @param int $minutes
            * @return string
            */
            public function minutesToTime($minutes)

            $hours = floor($minutes / 60);
            $minutes = $minutes % 60;
            $part = $hours >= 12 ? 'PM' : 'AM';

            return sprintf('%02d:%02d %s', $hours, $minutes, $part);


            /**
            * @return string
            * @throws MagentoFrameworkExceptionValidatorException
            */
            protected function _toHtml()

            if (!$this->getTemplate())
            return '';


            return $this->fetchView($this->getTemplateFile());




            Note: you should change values of the constants TIME_NAME_FROM and TIME_NAME_TO to own ones, according your definition in the system.xml.



            Template:



            <?php

            /** @var MageWorxExampleConfigBlockTimeSlider $block */
            $element = $block->getElement();
            $form = $element->getForm();
            /** @var MagentoConfigBlockSystemConfigForm $parentForm */
            $parentForm = $form->getParent();
            $timeFrom = $parentForm->getConfigValue('example_config/main/delivery_time_from');;
            $timeTo = $parentForm->getConfigValue('example_config/main/delivery_time_to');;
            ?>
            <div id="time-range" class="field field-time_range">
            <label class="label" style="white-space: normal;">
            <?php echo __('Time Range: ');?>
            <span class="slider-time">
            <?php echo $block->minutesToTime($timeFrom);?>
            </span>
            <?php echo ' - '; ?>
            <span class="slider-time2">
            <?php echo $block->minutesToTime($timeTo);?>
            </span>
            </label>
            <div class="sliders_step1 control">
            <div id="slider-range"></div>
            <input type="hidden"
            name="<?php echo $block->getNameFrom();?>"
            value="<?php echo $timeFrom?>""
            />
            <input type="hidden"
            name="<?php echo $block->getNameTo();?>"
            value="<?php echo $timeTo?>""
            />
            </div>
            </div>
            <script type="text/javascript">
            require(['jquery', 'jquery/ui'], function($)
            $("#slider-range").slider(
            range: true,
            min: 0,
            max: 1440,
            step: 15,
            values: [<?php echo $timeFrom?>, <?php echo $timeTo?>],
            slide: function (e, ui)
            var hours1 = Math.floor(ui.values[0] / 60);
            var minutes1 = ui.values[0] - (hours1 * 60);

            if (hours1.length == 1) hours1 = '0' + hours1;
            if (minutes1.length == 1) minutes1 = '0' + minutes1;
            if (minutes1 == 0) minutes1 = '00';
            if (hours1 >= 12)
            if (hours1 == 12)
            hours1 = hours1;
            minutes1 = minutes1 + " PM";
            else
            hours1 = hours1 - 12;
            minutes1 = minutes1 + " PM";

            else
            hours1 = hours1;
            minutes1 = minutes1 + " AM";

            if (hours1 == 0)
            hours1 = 12;
            minutes1 = minutes1;



            $('.slider-time').html(hours1 + ':' + minutes1);

            var hours2 = Math.floor(ui.values[1] / 60);
            var minutes2 = ui.values[1] - (hours2 * 60);

            if (hours2.length == 1) hours2 = '0' + hours2;
            if (minutes2.length == 1) minutes2 = '0' + minutes2;
            if (minutes2 == 0) minutes2 = '00';
            if (hours2 >= 12)
            if (hours2 == 12)
            hours2 = hours2;
            minutes2 = minutes2 + " PM";
            else if (hours2 == 24)
            hours2 = 11;
            minutes2 = "59 PM";
            else
            hours2 = hours2 - 12;
            minutes2 = minutes2 + " PM";

            else
            hours2 = hours2;
            minutes2 = minutes2 + " AM";


            $('.slider-time2').html(hours2 + ':' + minutes2);
            $('[name="<?php echo $block->getNameFrom();?>"]').val(ui.values[0]);
            $('[name="<?php echo $block->getNameTo();?>"]').val(ui.values[1]);

            );
            );
            </script>


            That's all. Based on this example you can modify code to add base features like a use global value etc.



            Here is full code on the GitHub.



            PS: Example partially taken from the Shipping Suite Ultimate Extension by MageWorx (where that kind of slider used in the form).



            PPS: in the example time stored in the database in minutes, like 120 => 2:00 AM.






            share|improve this answer



























              1














              If you wish to add time from/to elements as a slider, you can customize an element frontend model and add your own template.



              How it will be looking



              Here is my example (ported from the regular form to the store configuration section):



              Field in the system.xml:



              <field id="delivery_time" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
              <label>Delivery Time</label>
              <frontend_model>MageWorxExampleConfigModelConfigFrontendModelDeliveryTime</frontend_model>
              </field>


              Note: real values will be stored with the delivery_time_from and delivery_time_to indexes.



              Frontend model, where I have replaced the default output of the element:



              <?php

              namespace MageWorxExampleConfigModelConfigFrontendModel;


              class DeliveryTime extends MagentoConfigBlockSystemConfigFormField

              /**
              * Retrieve element HTML markup
              *
              * @param MagentoFrameworkDataFormElementAbstractElement $element
              * @return string
              * @throws MagentoFrameworkExceptionLocalizedException
              */
              protected function _getElementHtml(MagentoFrameworkDataFormElementAbstractElement $element)

              $renderer = $this->getLayout()->createBlock(
              'MageWorxExampleConfigBlockTimeSlider'
              );
              $renderer->setElement($element);

              return $renderer->toHtml();




              here we just using a block MageWorxExampleConfigBlockTimeSlider instead of general render.



              And here is the block with template (where slider was defined):



              <?php

              namespace MageWorxExampleConfigBlock;

              use MagentoFrameworkDataFormElementAbstractElement;

              /**
              * Class TimeSlider
              */
              class TimeSlider extends MagentoFrameworkViewElementTemplate implements
              MagentoFrameworkDataFormElementRendererRendererInterface,
              MagentoWidgetBlockBlockInterface


              const TIME_NAME_FROM = 'groups[main][fields][delivery_time_from][value]';
              const TIME_NAME_TO = 'groups[main][fields][delivery_time_to][value]';

              /**
              * Form element which re-rendering
              *
              * @var MagentoFrameworkDataFormElementFieldset
              */
              protected $element;

              /**
              * @var string
              */
              protected $_template = 'MageWorx_ExampleConfig::form/renderer/timeslider.phtml';

              /**
              * @var string
              */
              protected $_htmlId = 'time-range';

              /**
              * Retrieve an element
              *
              * @return MagentoFrameworkDataFormElementFieldset
              */
              public function getElement()

              return $this->element;


              /**
              * Set an element
              *
              * @param AbstractElement $element
              * @return $this
              */
              public function setElement(MagentoFrameworkDataFormElementAbstractElement $element)

              $this->element = $element;

              return $this;


              /**
              * Render element
              *
              * @param AbstractElement $element
              * @return string
              */
              public function render(AbstractElement $element)

              $this->element = $element;

              return $this->toHtml();


              /**
              * @return string
              */
              public function getHtmlId()

              return $this->_htmlId;


              /**
              * @return string
              */
              public function getNameFrom()

              return self::TIME_NAME_FROM;


              /**
              * @return string
              */
              public function getNameTo()

              return self::TIME_NAME_TO;


              /**
              * @param int $minutes
              * @return string
              */
              public function minutesToTime($minutes)

              $hours = floor($minutes / 60);
              $minutes = $minutes % 60;
              $part = $hours >= 12 ? 'PM' : 'AM';

              return sprintf('%02d:%02d %s', $hours, $minutes, $part);


              /**
              * @return string
              * @throws MagentoFrameworkExceptionValidatorException
              */
              protected function _toHtml()

              if (!$this->getTemplate())
              return '';


              return $this->fetchView($this->getTemplateFile());




              Note: you should change values of the constants TIME_NAME_FROM and TIME_NAME_TO to own ones, according your definition in the system.xml.



              Template:



              <?php

              /** @var MageWorxExampleConfigBlockTimeSlider $block */
              $element = $block->getElement();
              $form = $element->getForm();
              /** @var MagentoConfigBlockSystemConfigForm $parentForm */
              $parentForm = $form->getParent();
              $timeFrom = $parentForm->getConfigValue('example_config/main/delivery_time_from');;
              $timeTo = $parentForm->getConfigValue('example_config/main/delivery_time_to');;
              ?>
              <div id="time-range" class="field field-time_range">
              <label class="label" style="white-space: normal;">
              <?php echo __('Time Range: ');?>
              <span class="slider-time">
              <?php echo $block->minutesToTime($timeFrom);?>
              </span>
              <?php echo ' - '; ?>
              <span class="slider-time2">
              <?php echo $block->minutesToTime($timeTo);?>
              </span>
              </label>
              <div class="sliders_step1 control">
              <div id="slider-range"></div>
              <input type="hidden"
              name="<?php echo $block->getNameFrom();?>"
              value="<?php echo $timeFrom?>""
              />
              <input type="hidden"
              name="<?php echo $block->getNameTo();?>"
              value="<?php echo $timeTo?>""
              />
              </div>
              </div>
              <script type="text/javascript">
              require(['jquery', 'jquery/ui'], function($)
              $("#slider-range").slider(
              range: true,
              min: 0,
              max: 1440,
              step: 15,
              values: [<?php echo $timeFrom?>, <?php echo $timeTo?>],
              slide: function (e, ui)
              var hours1 = Math.floor(ui.values[0] / 60);
              var minutes1 = ui.values[0] - (hours1 * 60);

              if (hours1.length == 1) hours1 = '0' + hours1;
              if (minutes1.length == 1) minutes1 = '0' + minutes1;
              if (minutes1 == 0) minutes1 = '00';
              if (hours1 >= 12)
              if (hours1 == 12)
              hours1 = hours1;
              minutes1 = minutes1 + " PM";
              else
              hours1 = hours1 - 12;
              minutes1 = minutes1 + " PM";

              else
              hours1 = hours1;
              minutes1 = minutes1 + " AM";

              if (hours1 == 0)
              hours1 = 12;
              minutes1 = minutes1;



              $('.slider-time').html(hours1 + ':' + minutes1);

              var hours2 = Math.floor(ui.values[1] / 60);
              var minutes2 = ui.values[1] - (hours2 * 60);

              if (hours2.length == 1) hours2 = '0' + hours2;
              if (minutes2.length == 1) minutes2 = '0' + minutes2;
              if (minutes2 == 0) minutes2 = '00';
              if (hours2 >= 12)
              if (hours2 == 12)
              hours2 = hours2;
              minutes2 = minutes2 + " PM";
              else if (hours2 == 24)
              hours2 = 11;
              minutes2 = "59 PM";
              else
              hours2 = hours2 - 12;
              minutes2 = minutes2 + " PM";

              else
              hours2 = hours2;
              minutes2 = minutes2 + " AM";


              $('.slider-time2').html(hours2 + ':' + minutes2);
              $('[name="<?php echo $block->getNameFrom();?>"]').val(ui.values[0]);
              $('[name="<?php echo $block->getNameTo();?>"]').val(ui.values[1]);

              );
              );
              </script>


              That's all. Based on this example you can modify code to add base features like a use global value etc.



              Here is full code on the GitHub.



              PS: Example partially taken from the Shipping Suite Ultimate Extension by MageWorx (where that kind of slider used in the form).



              PPS: in the example time stored in the database in minutes, like 120 => 2:00 AM.






              share|improve this answer

























                1












                1








                1







                If you wish to add time from/to elements as a slider, you can customize an element frontend model and add your own template.



                How it will be looking



                Here is my example (ported from the regular form to the store configuration section):



                Field in the system.xml:



                <field id="delivery_time" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
                <label>Delivery Time</label>
                <frontend_model>MageWorxExampleConfigModelConfigFrontendModelDeliveryTime</frontend_model>
                </field>


                Note: real values will be stored with the delivery_time_from and delivery_time_to indexes.



                Frontend model, where I have replaced the default output of the element:



                <?php

                namespace MageWorxExampleConfigModelConfigFrontendModel;


                class DeliveryTime extends MagentoConfigBlockSystemConfigFormField

                /**
                * Retrieve element HTML markup
                *
                * @param MagentoFrameworkDataFormElementAbstractElement $element
                * @return string
                * @throws MagentoFrameworkExceptionLocalizedException
                */
                protected function _getElementHtml(MagentoFrameworkDataFormElementAbstractElement $element)

                $renderer = $this->getLayout()->createBlock(
                'MageWorxExampleConfigBlockTimeSlider'
                );
                $renderer->setElement($element);

                return $renderer->toHtml();




                here we just using a block MageWorxExampleConfigBlockTimeSlider instead of general render.



                And here is the block with template (where slider was defined):



                <?php

                namespace MageWorxExampleConfigBlock;

                use MagentoFrameworkDataFormElementAbstractElement;

                /**
                * Class TimeSlider
                */
                class TimeSlider extends MagentoFrameworkViewElementTemplate implements
                MagentoFrameworkDataFormElementRendererRendererInterface,
                MagentoWidgetBlockBlockInterface


                const TIME_NAME_FROM = 'groups[main][fields][delivery_time_from][value]';
                const TIME_NAME_TO = 'groups[main][fields][delivery_time_to][value]';

                /**
                * Form element which re-rendering
                *
                * @var MagentoFrameworkDataFormElementFieldset
                */
                protected $element;

                /**
                * @var string
                */
                protected $_template = 'MageWorx_ExampleConfig::form/renderer/timeslider.phtml';

                /**
                * @var string
                */
                protected $_htmlId = 'time-range';

                /**
                * Retrieve an element
                *
                * @return MagentoFrameworkDataFormElementFieldset
                */
                public function getElement()

                return $this->element;


                /**
                * Set an element
                *
                * @param AbstractElement $element
                * @return $this
                */
                public function setElement(MagentoFrameworkDataFormElementAbstractElement $element)

                $this->element = $element;

                return $this;


                /**
                * Render element
                *
                * @param AbstractElement $element
                * @return string
                */
                public function render(AbstractElement $element)

                $this->element = $element;

                return $this->toHtml();


                /**
                * @return string
                */
                public function getHtmlId()

                return $this->_htmlId;


                /**
                * @return string
                */
                public function getNameFrom()

                return self::TIME_NAME_FROM;


                /**
                * @return string
                */
                public function getNameTo()

                return self::TIME_NAME_TO;


                /**
                * @param int $minutes
                * @return string
                */
                public function minutesToTime($minutes)

                $hours = floor($minutes / 60);
                $minutes = $minutes % 60;
                $part = $hours >= 12 ? 'PM' : 'AM';

                return sprintf('%02d:%02d %s', $hours, $minutes, $part);


                /**
                * @return string
                * @throws MagentoFrameworkExceptionValidatorException
                */
                protected function _toHtml()

                if (!$this->getTemplate())
                return '';


                return $this->fetchView($this->getTemplateFile());




                Note: you should change values of the constants TIME_NAME_FROM and TIME_NAME_TO to own ones, according your definition in the system.xml.



                Template:



                <?php

                /** @var MageWorxExampleConfigBlockTimeSlider $block */
                $element = $block->getElement();
                $form = $element->getForm();
                /** @var MagentoConfigBlockSystemConfigForm $parentForm */
                $parentForm = $form->getParent();
                $timeFrom = $parentForm->getConfigValue('example_config/main/delivery_time_from');;
                $timeTo = $parentForm->getConfigValue('example_config/main/delivery_time_to');;
                ?>
                <div id="time-range" class="field field-time_range">
                <label class="label" style="white-space: normal;">
                <?php echo __('Time Range: ');?>
                <span class="slider-time">
                <?php echo $block->minutesToTime($timeFrom);?>
                </span>
                <?php echo ' - '; ?>
                <span class="slider-time2">
                <?php echo $block->minutesToTime($timeTo);?>
                </span>
                </label>
                <div class="sliders_step1 control">
                <div id="slider-range"></div>
                <input type="hidden"
                name="<?php echo $block->getNameFrom();?>"
                value="<?php echo $timeFrom?>""
                />
                <input type="hidden"
                name="<?php echo $block->getNameTo();?>"
                value="<?php echo $timeTo?>""
                />
                </div>
                </div>
                <script type="text/javascript">
                require(['jquery', 'jquery/ui'], function($)
                $("#slider-range").slider(
                range: true,
                min: 0,
                max: 1440,
                step: 15,
                values: [<?php echo $timeFrom?>, <?php echo $timeTo?>],
                slide: function (e, ui)
                var hours1 = Math.floor(ui.values[0] / 60);
                var minutes1 = ui.values[0] - (hours1 * 60);

                if (hours1.length == 1) hours1 = '0' + hours1;
                if (minutes1.length == 1) minutes1 = '0' + minutes1;
                if (minutes1 == 0) minutes1 = '00';
                if (hours1 >= 12)
                if (hours1 == 12)
                hours1 = hours1;
                minutes1 = minutes1 + " PM";
                else
                hours1 = hours1 - 12;
                minutes1 = minutes1 + " PM";

                else
                hours1 = hours1;
                minutes1 = minutes1 + " AM";

                if (hours1 == 0)
                hours1 = 12;
                minutes1 = minutes1;



                $('.slider-time').html(hours1 + ':' + minutes1);

                var hours2 = Math.floor(ui.values[1] / 60);
                var minutes2 = ui.values[1] - (hours2 * 60);

                if (hours2.length == 1) hours2 = '0' + hours2;
                if (minutes2.length == 1) minutes2 = '0' + minutes2;
                if (minutes2 == 0) minutes2 = '00';
                if (hours2 >= 12)
                if (hours2 == 12)
                hours2 = hours2;
                minutes2 = minutes2 + " PM";
                else if (hours2 == 24)
                hours2 = 11;
                minutes2 = "59 PM";
                else
                hours2 = hours2 - 12;
                minutes2 = minutes2 + " PM";

                else
                hours2 = hours2;
                minutes2 = minutes2 + " AM";


                $('.slider-time2').html(hours2 + ':' + minutes2);
                $('[name="<?php echo $block->getNameFrom();?>"]').val(ui.values[0]);
                $('[name="<?php echo $block->getNameTo();?>"]').val(ui.values[1]);

                );
                );
                </script>


                That's all. Based on this example you can modify code to add base features like a use global value etc.



                Here is full code on the GitHub.



                PS: Example partially taken from the Shipping Suite Ultimate Extension by MageWorx (where that kind of slider used in the form).



                PPS: in the example time stored in the database in minutes, like 120 => 2:00 AM.






                share|improve this answer













                If you wish to add time from/to elements as a slider, you can customize an element frontend model and add your own template.



                How it will be looking



                Here is my example (ported from the regular form to the store configuration section):



                Field in the system.xml:



                <field id="delivery_time" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
                <label>Delivery Time</label>
                <frontend_model>MageWorxExampleConfigModelConfigFrontendModelDeliveryTime</frontend_model>
                </field>


                Note: real values will be stored with the delivery_time_from and delivery_time_to indexes.



                Frontend model, where I have replaced the default output of the element:



                <?php

                namespace MageWorxExampleConfigModelConfigFrontendModel;


                class DeliveryTime extends MagentoConfigBlockSystemConfigFormField

                /**
                * Retrieve element HTML markup
                *
                * @param MagentoFrameworkDataFormElementAbstractElement $element
                * @return string
                * @throws MagentoFrameworkExceptionLocalizedException
                */
                protected function _getElementHtml(MagentoFrameworkDataFormElementAbstractElement $element)

                $renderer = $this->getLayout()->createBlock(
                'MageWorxExampleConfigBlockTimeSlider'
                );
                $renderer->setElement($element);

                return $renderer->toHtml();




                here we just using a block MageWorxExampleConfigBlockTimeSlider instead of general render.



                And here is the block with template (where slider was defined):



                <?php

                namespace MageWorxExampleConfigBlock;

                use MagentoFrameworkDataFormElementAbstractElement;

                /**
                * Class TimeSlider
                */
                class TimeSlider extends MagentoFrameworkViewElementTemplate implements
                MagentoFrameworkDataFormElementRendererRendererInterface,
                MagentoWidgetBlockBlockInterface


                const TIME_NAME_FROM = 'groups[main][fields][delivery_time_from][value]';
                const TIME_NAME_TO = 'groups[main][fields][delivery_time_to][value]';

                /**
                * Form element which re-rendering
                *
                * @var MagentoFrameworkDataFormElementFieldset
                */
                protected $element;

                /**
                * @var string
                */
                protected $_template = 'MageWorx_ExampleConfig::form/renderer/timeslider.phtml';

                /**
                * @var string
                */
                protected $_htmlId = 'time-range';

                /**
                * Retrieve an element
                *
                * @return MagentoFrameworkDataFormElementFieldset
                */
                public function getElement()

                return $this->element;


                /**
                * Set an element
                *
                * @param AbstractElement $element
                * @return $this
                */
                public function setElement(MagentoFrameworkDataFormElementAbstractElement $element)

                $this->element = $element;

                return $this;


                /**
                * Render element
                *
                * @param AbstractElement $element
                * @return string
                */
                public function render(AbstractElement $element)

                $this->element = $element;

                return $this->toHtml();


                /**
                * @return string
                */
                public function getHtmlId()

                return $this->_htmlId;


                /**
                * @return string
                */
                public function getNameFrom()

                return self::TIME_NAME_FROM;


                /**
                * @return string
                */
                public function getNameTo()

                return self::TIME_NAME_TO;


                /**
                * @param int $minutes
                * @return string
                */
                public function minutesToTime($minutes)

                $hours = floor($minutes / 60);
                $minutes = $minutes % 60;
                $part = $hours >= 12 ? 'PM' : 'AM';

                return sprintf('%02d:%02d %s', $hours, $minutes, $part);


                /**
                * @return string
                * @throws MagentoFrameworkExceptionValidatorException
                */
                protected function _toHtml()

                if (!$this->getTemplate())
                return '';


                return $this->fetchView($this->getTemplateFile());




                Note: you should change values of the constants TIME_NAME_FROM and TIME_NAME_TO to own ones, according your definition in the system.xml.



                Template:



                <?php

                /** @var MageWorxExampleConfigBlockTimeSlider $block */
                $element = $block->getElement();
                $form = $element->getForm();
                /** @var MagentoConfigBlockSystemConfigForm $parentForm */
                $parentForm = $form->getParent();
                $timeFrom = $parentForm->getConfigValue('example_config/main/delivery_time_from');;
                $timeTo = $parentForm->getConfigValue('example_config/main/delivery_time_to');;
                ?>
                <div id="time-range" class="field field-time_range">
                <label class="label" style="white-space: normal;">
                <?php echo __('Time Range: ');?>
                <span class="slider-time">
                <?php echo $block->minutesToTime($timeFrom);?>
                </span>
                <?php echo ' - '; ?>
                <span class="slider-time2">
                <?php echo $block->minutesToTime($timeTo);?>
                </span>
                </label>
                <div class="sliders_step1 control">
                <div id="slider-range"></div>
                <input type="hidden"
                name="<?php echo $block->getNameFrom();?>"
                value="<?php echo $timeFrom?>""
                />
                <input type="hidden"
                name="<?php echo $block->getNameTo();?>"
                value="<?php echo $timeTo?>""
                />
                </div>
                </div>
                <script type="text/javascript">
                require(['jquery', 'jquery/ui'], function($)
                $("#slider-range").slider(
                range: true,
                min: 0,
                max: 1440,
                step: 15,
                values: [<?php echo $timeFrom?>, <?php echo $timeTo?>],
                slide: function (e, ui)
                var hours1 = Math.floor(ui.values[0] / 60);
                var minutes1 = ui.values[0] - (hours1 * 60);

                if (hours1.length == 1) hours1 = '0' + hours1;
                if (minutes1.length == 1) minutes1 = '0' + minutes1;
                if (minutes1 == 0) minutes1 = '00';
                if (hours1 >= 12)
                if (hours1 == 12)
                hours1 = hours1;
                minutes1 = minutes1 + " PM";
                else
                hours1 = hours1 - 12;
                minutes1 = minutes1 + " PM";

                else
                hours1 = hours1;
                minutes1 = minutes1 + " AM";

                if (hours1 == 0)
                hours1 = 12;
                minutes1 = minutes1;



                $('.slider-time').html(hours1 + ':' + minutes1);

                var hours2 = Math.floor(ui.values[1] / 60);
                var minutes2 = ui.values[1] - (hours2 * 60);

                if (hours2.length == 1) hours2 = '0' + hours2;
                if (minutes2.length == 1) minutes2 = '0' + minutes2;
                if (minutes2 == 0) minutes2 = '00';
                if (hours2 >= 12)
                if (hours2 == 12)
                hours2 = hours2;
                minutes2 = minutes2 + " PM";
                else if (hours2 == 24)
                hours2 = 11;
                minutes2 = "59 PM";
                else
                hours2 = hours2 - 12;
                minutes2 = minutes2 + " PM";

                else
                hours2 = hours2;
                minutes2 = minutes2 + " AM";


                $('.slider-time2').html(hours2 + ':' + minutes2);
                $('[name="<?php echo $block->getNameFrom();?>"]').val(ui.values[0]);
                $('[name="<?php echo $block->getNameTo();?>"]').val(ui.values[1]);

                );
                );
                </script>


                That's all. Based on this example you can modify code to add base features like a use global value etc.



                Here is full code on the GitHub.



                PS: Example partially taken from the Shipping Suite Ultimate Extension by MageWorx (where that kind of slider used in the form).



                PPS: in the example time stored in the database in minutes, like 120 => 2:00 AM.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered yesterday









                Siarhey UchukhlebauSiarhey Uchukhlebau

                10.1k93058




                10.1k93058























                    2














                    I would suggest to use the same way magento uses for saving time.



                    In your admin panel, goto




                    Stores -> Configuration -> Advanced -> System -> Scheduled Backup Settings




                    See the Start Time field.



                    enter image description here



                    You may use the same thing in your system.xml file. It seems more accurate.



                    Let me know if you need a code sample for that. I have used the same in one of my module.





                    etc/adminhtml/system.xml





                    <field id="opening_time" translate="label" type="time" showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="40">
                    <label>Opening Time</label>
                    </field>


                    Just add above field in system.xml and it will work as per magento standard. It will save time like 15,25,00. The type='time' makes it work. Thats it. No additional coding is needed.






                    share|improve this answer

























                    • can you include code for this one so that I can check

                      – magefms
                      Apr 10 at 7:50











                    • Edited answer with the code. Please check.

                      – Yash Shah
                      Apr 10 at 7:54











                    • okay, I will update you if it works

                      – magefms
                      Apr 10 at 7:54















                    2














                    I would suggest to use the same way magento uses for saving time.



                    In your admin panel, goto




                    Stores -> Configuration -> Advanced -> System -> Scheduled Backup Settings




                    See the Start Time field.



                    enter image description here



                    You may use the same thing in your system.xml file. It seems more accurate.



                    Let me know if you need a code sample for that. I have used the same in one of my module.





                    etc/adminhtml/system.xml





                    <field id="opening_time" translate="label" type="time" showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="40">
                    <label>Opening Time</label>
                    </field>


                    Just add above field in system.xml and it will work as per magento standard. It will save time like 15,25,00. The type='time' makes it work. Thats it. No additional coding is needed.






                    share|improve this answer

























                    • can you include code for this one so that I can check

                      – magefms
                      Apr 10 at 7:50











                    • Edited answer with the code. Please check.

                      – Yash Shah
                      Apr 10 at 7:54











                    • okay, I will update you if it works

                      – magefms
                      Apr 10 at 7:54













                    2












                    2








                    2







                    I would suggest to use the same way magento uses for saving time.



                    In your admin panel, goto




                    Stores -> Configuration -> Advanced -> System -> Scheduled Backup Settings




                    See the Start Time field.



                    enter image description here



                    You may use the same thing in your system.xml file. It seems more accurate.



                    Let me know if you need a code sample for that. I have used the same in one of my module.





                    etc/adminhtml/system.xml





                    <field id="opening_time" translate="label" type="time" showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="40">
                    <label>Opening Time</label>
                    </field>


                    Just add above field in system.xml and it will work as per magento standard. It will save time like 15,25,00. The type='time' makes it work. Thats it. No additional coding is needed.






                    share|improve this answer















                    I would suggest to use the same way magento uses for saving time.



                    In your admin panel, goto




                    Stores -> Configuration -> Advanced -> System -> Scheduled Backup Settings




                    See the Start Time field.



                    enter image description here



                    You may use the same thing in your system.xml file. It seems more accurate.



                    Let me know if you need a code sample for that. I have used the same in one of my module.





                    etc/adminhtml/system.xml





                    <field id="opening_time" translate="label" type="time" showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="40">
                    <label>Opening Time</label>
                    </field>


                    Just add above field in system.xml and it will work as per magento standard. It will save time like 15,25,00. The type='time' makes it work. Thats it. No additional coding is needed.







                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited Apr 10 at 8:03

























                    answered Apr 10 at 7:49









                    Yash ShahYash Shah

                    78118




                    78118












                    • can you include code for this one so that I can check

                      – magefms
                      Apr 10 at 7:50











                    • Edited answer with the code. Please check.

                      – Yash Shah
                      Apr 10 at 7:54











                    • okay, I will update you if it works

                      – magefms
                      Apr 10 at 7:54

















                    • can you include code for this one so that I can check

                      – magefms
                      Apr 10 at 7:50











                    • Edited answer with the code. Please check.

                      – Yash Shah
                      Apr 10 at 7:54











                    • okay, I will update you if it works

                      – magefms
                      Apr 10 at 7:54
















                    can you include code for this one so that I can check

                    – magefms
                    Apr 10 at 7:50





                    can you include code for this one so that I can check

                    – magefms
                    Apr 10 at 7:50













                    Edited answer with the code. Please check.

                    – Yash Shah
                    Apr 10 at 7:54





                    Edited answer with the code. Please check.

                    – Yash Shah
                    Apr 10 at 7:54













                    okay, I will update you if it works

                    – magefms
                    Apr 10 at 7:54





                    okay, I will update you if it works

                    – magefms
                    Apr 10 at 7:54











                    1














                    You can follow steps below to show Datetime field in your custom module admin config section



                    step 1) Create system.xml under ***app/code/Vendor/Module/etc/adminFile:*



                    File : app/code/Vendor/MyModule/etc/adminhtml/system.xml



                    <?xml version="1.0"?>

                    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
                    <system>
                    <tab id="mycustom" translate="label" sortOrder="450">
                    <label>My Custom Setting</label>
                    </tab>
                    <section id="mycustom" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                    <class>separator-top</class>
                    <label>My Custom Setting</label>
                    <tab>mycustom</tab>
                    <resource>Magento_Checkout::config</resource>
                    <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <field id="mydate" translate="label" type="date" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>My Date Field</label>
                    <frontend_model>VendorMyModuleBlockAdminhtmlSystemConfigDateTime</frontend_model>
                    </field>
                    </group>
                    </section>
                    </system>
                    </config>


                    step 2) Create the block DateTime.php under /app/code/Vendor/MyModule/Block/Adminhtml/System/Config/DateTime.php



                    File : /app/code/Vendor/MyModule/Block/Adminhtml/System/Config/DateTime.php



                    <?php

                    namespace VendorMyModuleBlockAdminhtmlSystemConfig;

                    class DateTime extends MagentoConfigBlockSystemConfigFormField


                    protected $timezone;

                    public function __construct(
                    MagentoBackendBlockTemplateContext $context,
                    MagentoFrameworkStdlibDateTimeTimezoneInterface $timezone,
                    array $data = []
                    )
                    $this->timezone = $timezone;
                    parent::__construct($context, $data);


                    public function render(MagentoFrameworkDataFormElementAbstractElement $element)

                    $element->setDateFormat($this->timezone->getDateFormat());
                    $element->setTimeFormat($this->timezone->getTimeFormat());
                    $element->setShowsTime(true);
                    return parent::render($element);




                    step 3: Run Following commands



                    sudo php bin/magento setup:di:compile
                    sudo php bin/magento cache:flush


                    step 4: Check your custom module admin config section for newly added datetime config field.



                    enter image description here






                    share|improve this answer























                    • Thanks for the answer bro, but I have done that already, please review my requirement, I need time picker only.

                      – magefms
                      Apr 10 at 7:10















                    1














                    You can follow steps below to show Datetime field in your custom module admin config section



                    step 1) Create system.xml under ***app/code/Vendor/Module/etc/adminFile:*



                    File : app/code/Vendor/MyModule/etc/adminhtml/system.xml



                    <?xml version="1.0"?>

                    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
                    <system>
                    <tab id="mycustom" translate="label" sortOrder="450">
                    <label>My Custom Setting</label>
                    </tab>
                    <section id="mycustom" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                    <class>separator-top</class>
                    <label>My Custom Setting</label>
                    <tab>mycustom</tab>
                    <resource>Magento_Checkout::config</resource>
                    <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <field id="mydate" translate="label" type="date" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>My Date Field</label>
                    <frontend_model>VendorMyModuleBlockAdminhtmlSystemConfigDateTime</frontend_model>
                    </field>
                    </group>
                    </section>
                    </system>
                    </config>


                    step 2) Create the block DateTime.php under /app/code/Vendor/MyModule/Block/Adminhtml/System/Config/DateTime.php



                    File : /app/code/Vendor/MyModule/Block/Adminhtml/System/Config/DateTime.php



                    <?php

                    namespace VendorMyModuleBlockAdminhtmlSystemConfig;

                    class DateTime extends MagentoConfigBlockSystemConfigFormField


                    protected $timezone;

                    public function __construct(
                    MagentoBackendBlockTemplateContext $context,
                    MagentoFrameworkStdlibDateTimeTimezoneInterface $timezone,
                    array $data = []
                    )
                    $this->timezone = $timezone;
                    parent::__construct($context, $data);


                    public function render(MagentoFrameworkDataFormElementAbstractElement $element)

                    $element->setDateFormat($this->timezone->getDateFormat());
                    $element->setTimeFormat($this->timezone->getTimeFormat());
                    $element->setShowsTime(true);
                    return parent::render($element);




                    step 3: Run Following commands



                    sudo php bin/magento setup:di:compile
                    sudo php bin/magento cache:flush


                    step 4: Check your custom module admin config section for newly added datetime config field.



                    enter image description here






                    share|improve this answer























                    • Thanks for the answer bro, but I have done that already, please review my requirement, I need time picker only.

                      – magefms
                      Apr 10 at 7:10













                    1












                    1








                    1







                    You can follow steps below to show Datetime field in your custom module admin config section



                    step 1) Create system.xml under ***app/code/Vendor/Module/etc/adminFile:*



                    File : app/code/Vendor/MyModule/etc/adminhtml/system.xml



                    <?xml version="1.0"?>

                    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
                    <system>
                    <tab id="mycustom" translate="label" sortOrder="450">
                    <label>My Custom Setting</label>
                    </tab>
                    <section id="mycustom" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                    <class>separator-top</class>
                    <label>My Custom Setting</label>
                    <tab>mycustom</tab>
                    <resource>Magento_Checkout::config</resource>
                    <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <field id="mydate" translate="label" type="date" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>My Date Field</label>
                    <frontend_model>VendorMyModuleBlockAdminhtmlSystemConfigDateTime</frontend_model>
                    </field>
                    </group>
                    </section>
                    </system>
                    </config>


                    step 2) Create the block DateTime.php under /app/code/Vendor/MyModule/Block/Adminhtml/System/Config/DateTime.php



                    File : /app/code/Vendor/MyModule/Block/Adminhtml/System/Config/DateTime.php



                    <?php

                    namespace VendorMyModuleBlockAdminhtmlSystemConfig;

                    class DateTime extends MagentoConfigBlockSystemConfigFormField


                    protected $timezone;

                    public function __construct(
                    MagentoBackendBlockTemplateContext $context,
                    MagentoFrameworkStdlibDateTimeTimezoneInterface $timezone,
                    array $data = []
                    )
                    $this->timezone = $timezone;
                    parent::__construct($context, $data);


                    public function render(MagentoFrameworkDataFormElementAbstractElement $element)

                    $element->setDateFormat($this->timezone->getDateFormat());
                    $element->setTimeFormat($this->timezone->getTimeFormat());
                    $element->setShowsTime(true);
                    return parent::render($element);




                    step 3: Run Following commands



                    sudo php bin/magento setup:di:compile
                    sudo php bin/magento cache:flush


                    step 4: Check your custom module admin config section for newly added datetime config field.



                    enter image description here






                    share|improve this answer













                    You can follow steps below to show Datetime field in your custom module admin config section



                    step 1) Create system.xml under ***app/code/Vendor/Module/etc/adminFile:*



                    File : app/code/Vendor/MyModule/etc/adminhtml/system.xml



                    <?xml version="1.0"?>

                    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
                    <system>
                    <tab id="mycustom" translate="label" sortOrder="450">
                    <label>My Custom Setting</label>
                    </tab>
                    <section id="mycustom" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                    <class>separator-top</class>
                    <label>My Custom Setting</label>
                    <tab>mycustom</tab>
                    <resource>Magento_Checkout::config</resource>
                    <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <field id="mydate" translate="label" type="date" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>My Date Field</label>
                    <frontend_model>VendorMyModuleBlockAdminhtmlSystemConfigDateTime</frontend_model>
                    </field>
                    </group>
                    </section>
                    </system>
                    </config>


                    step 2) Create the block DateTime.php under /app/code/Vendor/MyModule/Block/Adminhtml/System/Config/DateTime.php



                    File : /app/code/Vendor/MyModule/Block/Adminhtml/System/Config/DateTime.php



                    <?php

                    namespace VendorMyModuleBlockAdminhtmlSystemConfig;

                    class DateTime extends MagentoConfigBlockSystemConfigFormField


                    protected $timezone;

                    public function __construct(
                    MagentoBackendBlockTemplateContext $context,
                    MagentoFrameworkStdlibDateTimeTimezoneInterface $timezone,
                    array $data = []
                    )
                    $this->timezone = $timezone;
                    parent::__construct($context, $data);


                    public function render(MagentoFrameworkDataFormElementAbstractElement $element)

                    $element->setDateFormat($this->timezone->getDateFormat());
                    $element->setTimeFormat($this->timezone->getTimeFormat());
                    $element->setShowsTime(true);
                    return parent::render($element);




                    step 3: Run Following commands



                    sudo php bin/magento setup:di:compile
                    sudo php bin/magento cache:flush


                    step 4: Check your custom module admin config section for newly added datetime config field.



                    enter image description here







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Apr 10 at 7:03









                    Pritam Info 24Pritam Info 24

                    79217




                    79217












                    • Thanks for the answer bro, but I have done that already, please review my requirement, I need time picker only.

                      – magefms
                      Apr 10 at 7:10

















                    • Thanks for the answer bro, but I have done that already, please review my requirement, I need time picker only.

                      – magefms
                      Apr 10 at 7:10
















                    Thanks for the answer bro, but I have done that already, please review my requirement, I need time picker only.

                    – magefms
                    Apr 10 at 7:10





                    Thanks for the answer bro, but I have done that already, please review my requirement, I need time picker only.

                    – magefms
                    Apr 10 at 7:10

















                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Magento Stack Exchange!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f269454%2fhow-to-implement-time-range-picker-in-magento-2-admin-system-xml%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Sum ergo cogito? 1 nng

                    三茅街道4182Guuntc Dn precexpngmageondP