How to add custom filed type in admin form in magento 2? time range picker

Question

I want to create the custom time range picker type in Magento 2 admin form like below image

Answer 1

First of all, you have to add custom field type

$fieldset->addType(
   'time_range_picker',          
   'Vendor\Module\Block\Adminhtml\Timerange\Renderer\DefaultShift'
);

Then create your field file

<?php

namespace Vendor\Module\Block\Adminhtml\Timerange\Renderer;


class DefaultShift extends \Magento\Framework\Data\Form\Element\AbstractElement
{

    protected $defaultData = [
        'default_shift' => [
            'from' =>[
                    'hours' => 17,
                    'minutes' => 00
            ],
            'to' =>[
                    'hours' => 22,
                    'minutes' => 00
            ]
        ],
        'default_break'=> [
            'from' => [
                'hours' => 19,
                'minutes' => 30
            ],
            'to' => [
                'hours' => 20,
                'minutes' => 00
            ]
        ]
    ];

    /**
     * Get the after element html.
     *
     * @return mixed
     */
    public function getElementHtml()
    {

        $data = $this->getSelectedShiftDetails();
        $html = '<table>
                 <tr>
                 <td class="toppadding">';
        $html .= '<select class="ds-mg" name="' . $this->getName() . '[from][hours]" id="delivery_minutes">';
        if (isset($data['from']['hours'])) {
            $html .= $this->getHoursOptions($data['from']['hours']);
        } else {
            $html .= $this->getHoursOptions($this->defaultData[$this->getName()]['from']['hours']);
        }
        $html .= '</select>';

        $html .= '<select class="ds-mg" name="' . $this->getName() . '[from][minute]" id="delivery_second">';
        if (isset($data['from']['minute'])) {
            $html .= $this->getMinutesOptions($data['from']['minute']);
        } else {
            $html .= $this->getMinutesOptions($this->defaultData[$this->getName()]['from']['minutes']);
        }
        $html .= '</select>';

        $html .= '<span class="toppadding ds-mg">-</span>';
        $html .= '<select class="ds-mg" name="' . $this->getName() . '[to][hours]" id="delivery_minutes">';
        if (isset($data['from']['minute'])) {
            $html .= $this->getHoursOptions($data['to']['hours']);
        } else {
            $html .= $this->getHoursOptions($this->defaultData[$this->getName()]['to']['hours']);
        }
        $html .= '</select>';

        $html .= '<select class="ds-mg" name="' . $this->getName() . '[to][minute]" id="delivery_second">';

        if (isset($data['from']['minute'])) {
            $html .= $this->getMinutesOptions($data['to']['minute']);
        } else {
            $html .= $this->getMinutesOptions($this->defaultData[$this->getName()]['to']['minutes']);
        }
        $html .= '</select>';
        $html .= '</td>
                  </tr>
                  </table>';
        $html .= '<style>';
        $html .= '.ds-mg{margin-right:4px;}';
        $html .= '</style>';
        $html .= $this->getAfterElementHtml();
        return $html;
    }

    protected function getHoursOptions($val)
    {
        $html = '';
        for ($i = 0; $i < 24; $i++) {
            if ($val == $i) {
                $html .= '<option selected="selected">' . $i . '</option>';
            }
            else{
                $html .= '<option>' . $i . '</option>';
            }
        }
        return $html;
    }

    protected function getMinutesOptions($val)
    {
        $html = '';
        for ($i = 0; $i < 60; $i++) {
            $i = $i < 10 ? "0" . $i : $i;
            if ($val == $i) {
                $html .= '<option value="' . $i . '" selected="selected">' . $i . '</option>';
            }
            else{
                $html .= '<option>' . $i . '</option>';
            }
        }
        return $html;
    }

    public function getSelectedShiftDetails()
    {

        $dataCollection = [];
        if ($this->getValues()) {
            $jsonData = json_decode($this->getValues(), true);
            $dataCollection = $jsonData[$this->getName()];
        }
        return $dataCollection;
    }
}