Ttykuu

I found one similar solution that 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 Picker only without a date like the one from this answer but I don't need a UI component way of implementing it. I want to do it like in the first link way.

Expected output(the one in a green highlight):

Has anyone tried to implement the same?

Kindly share some reference or solution.

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.