How to add time range picker to adminhtml form in Magento 2?

Question

In Magento 2's devdocs pages there is an example of time range picker. But ,i can not find any examples of how to add it in my backend form for creating/editing of custom model. Have anyone any idea of how to do this?

Also ,i have a question on how to save it in mysql database. Do this picker needs 2 fields ("from" and "to") to store entered time?

Answer 1

Try this,

Under app\code\Namespace\Module\Block\Adminhtml\Custom\Edit\Form.php

$fieldset->addField(
            'from',
            'time',
            [
                'name' => 'from',
                'label' => __('From'),
                'title' => __('From'),
                'required' => true,
                'note' => __('From Timer')
            ]
        );

$fieldset->addField(
            'to',
            'time',
            [
                'name' => 'to',
                'label' => __('To'),
                'title' => __('To'),
                'required' => true,
                'note' => __('To Timer')
            ]
        );

Create the field in database to save the to and from values.

In controller file,

public function saveData()
{
   $data = $this->getRequest()->getPostValue();
   $model = $this->_objectManager->create('Namespace\Module\Model\Custom');
   $model->setData($data);
   $model->save();
}

Answer 2

Here you go

class DeliveryTime extends AbstractFieldArray
{
    /**
     * @var string
     */
    /**
     * @var Factory
     */
    protected $elementFactory;

    /**
     * DeliveryTime constructor.
     *
     * @param Context $context
     * @param Factory $elementFactory
     * @param array $data
     */
    public function __construct(
        Context $context,
        Factory $elementFactory,
        array $data = []
    ) {
        $this->elementFactory = $elementFactory;

        parent::__construct($context, $data);
    }

    /**
     * Initialise form fields
     *
     * @return void
     */
    public function _construct()
    {
        $this->addColumn('from', ['label' => __('From')]);
        $this->addColumn('to', ['label' => __('To')]);
        $this->_addAfter = false;

        parent::_construct();
    }

    /**
     * Render array cell for prototypeJS template
     *
     * @param string $columnName
     *
     * @return mixed|string
     * @throws Exception
     */
    public function renderCellTemplate($columnName)
    {
        if (!empty($this->_columns[$columnName]) && in_array($columnName, ['from', 'to'])) {
            $element = $this->elementFactory->create('time');
            $element->setForm($this->getForm())
                ->setName($this->_getCellInputElementName($columnName))
                ->setHtmlId($this->_getCellInputElementId('<%- _id %>', $columnName));

            return str_replace("\n", '', $element->getElementHtml());
        }
         return parent::renderCellTemplate($columnName);
    }

    /**
     * @return string
     */
    public function getAddButtonLabel()
    {
        return $this->_addButtonLabel;
    }
}

Answer 3

you can use the below code in the Magento Ui form

<listing>
    <columns>
        <column name="period">
            <settings>
                <filter>dateRange</filter>
                <label translate="true">Period</label>
            </settings>
        </column>
    </columns>
</listing>

Thanks