Mryntu

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.

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

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.

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.