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

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.

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.

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>MageWorx\ExampleConfig\Model\Config\FrontendModel\DeliveryTime</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 MageWorx\ExampleConfig\Model\Config\FrontendModel;


class DeliveryTime extends \Magento\Config\Block\System\Config\Form\Field
{
    /**
     * Retrieve element HTML markup
     *
     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
     * @return string
     * @throws \Magento\Framework\Exception\LocalizedException
     */
    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $renderer = $this->getLayout()->createBlock(
            'MageWorx\ExampleConfig\Block\TimeSlider'
        );
        $renderer->setElement($element);

        return $renderer->toHtml();
    }
}

here we just using a block MageWorx\ExampleConfig\Block\TimeSlider instead of general render.

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

<?php

namespace MageWorx\ExampleConfig\Block;

use Magento\Framework\Data\Form\Element\AbstractElement;

/**
 * Class TimeSlider
 */
class TimeSlider extends \Magento\Framework\View\Element\Template implements
    \Magento\Framework\Data\Form\Element\Renderer\RendererInterface,
    \Magento\Widget\Block\BlockInterface
{

    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 \Magento\Framework\Data\Form\Element\Fieldset
     */
    protected $element;

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

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

    /**
     * Retrieve an element
     *
     * @return \Magento\Framework\Data\Form\Element\Fieldset
     */
    public function getElement()
    {
        return $this->element;
    }

    /**
     * Set an element
     *
     * @param AbstractElement $element
     * @return $this
     */
    public function setElement(\Magento\Framework\Data\Form\Element\AbstractElement $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 \Magento\Framework\Exception\ValidatorException
     */
    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 MageWorx\ExampleConfig\Block\TimeSlider $block */
$element = $block->getElement();
$form = $element->getForm();
/** @var \Magento\Config\Block\System\Config\Form $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.

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.

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.

Answer 3

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>Vendor\MyModule\Block\Adminhtml\System\Config\DateTime</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 Vendor\MyModule\Block\Adminhtml\System\Config;

class DateTime extends \Magento\Config\Block\System\Config\Form\Field
{

    protected $timezone;

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Stdlib\DateTime\TimezoneInterface $timezone,
        array $data = []
    ) {
        $this->timezone = $timezone;
        parent::__construct($context, $data);
    }

    public function render(\Magento\Framework\Data\Form\Element\AbstractElement $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.