How to add Datatie input and color picker to dynamic form in configuration

Question

I want to add a dynamic form. I defined it in system.xml

<group id="config_first_default_dynamic_form" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
  <label>Quantity Ranges</label>
  <field id="config_default" translate="label" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Ranges</label>
    <frontend_model>Vendor\Module\Model\Config\FirstLabel</frontend_model>
    <backend_model>Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</backend_model>
  </field>
</group>

In FirstLabel.Php

/**
 * @return void
 */
public function _prepareToRender()
{
    $this->addColumn(
        'enabled_from',
        [
            'label' => __('Select date from'),
            'class' => 'required-entry',
            'renderer' => $this->getDateFromColumnRenderer(),
        ]
    );
    $this->addColumn(
        'background_color',
        [
            'label' => __('Select background color'),
            'class' => 'required-entry',
            'renderer' => $this->getColorBackgroundColumnRenderer(),
        ]
    );
    $this->addColumn('logo', ['label' => __('Logo'), 'size' => '100%', 'class' => 'required-entry']);
    $this->addColumn(
        'flag_show_selector',
        [
            'label' => __('Selected categories'),
            'class' => 'required-entry',
            'renderer' => $this->getCategoryColumnRenderer(),
        ]
    );

    $this->_addAfter = false;
    $this->_addButtonLabel = __('Add');
}

I have no problem with defining a selector or a multselect with categories:

protected function getCategoryColumnRenderer(): BlockInterface
{
    if (!$this->categoryRenderer) {
        $this->categoryRenderer = $this->getLayout()->createBlock(
            CategoryTable::class,
            ''
        );
    }
    return $this->categoryRenderer;
}

The problem appears when I want to add a color picker or datatime as a field or a field with an uploaded image. Anyone know how to add these fields to a dynamic form like in the picture below?

Answer 1

Here is the code to add color picker:

Add below code inside _prepareToRender function

$this->addColumn(
'color_picker,
[
'label' => __('Color Picker'),
'renderer' => $this->getColorRenderer(),
]);

Add function getColorRenderer

private function getColorRenderer()
    {
        if (!$this->colorRenderer) {
            $this->colorRenderer = $this->getLayout()->createBlock(
                \Vendor\Module\Block\Adminhtml\Blocks\Edit\Tab\ColorRenderer::class,
                '',
                ['data' => ['is_render_to_js_template' => true]]
            );
        }
        return $this->colorRenderer;
}

Now add class ColorRenderer

<?php

namespace Vendor\Module\Block\Adminhtml\Blocks\Edit\Tab;

class ColorRenderer extends \Magento\Framework\View\Element\AbstractBlock
{
    protected function _toHtml()
    {
        $html = '<input type="text" name="' . $this->getInputName() . '" id="' . $this->getInputId() . '" ';
        $html .= '<script type="text/javascript">
                require(["jquery","jquery/colorpicker/js/colorpicker"], function ($) {
                    $(document).ready(function () {
                        var $el = $("#'.$this->getInputId().'");
                        // Attach the color picker
                        $el.ColorPicker({
                            onChange: function (hsb, hex, rgb) {
                                $el.css("backgroundColor", "#" + hex).val("#" + hex);
                            }
                        });
                    });
                });
                </script>';

        return $html;
    }
}

Now you should see color picker like below: