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?

Here is a link to how to add uiComponents https://devdocs.magento.com/guides/v2.3/ui_comp_guide/howto/add_category_attribute.html
It is along same lines, create the attributes to save in db, create the xml to display. — djfordz, Dec 17 '18 at 12:57

saravanavelu · Answer 1 · 2016-06-06T11:44:37.503

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();
}

I've tried this earlier. This code adds two time fields positioned vertically. If I need 7 time range pickers (for each day of week) it looks very cumbersome. I wanted to place it at least in one line but much desirable to have it exact as on picture above. My opinion is that this time range picker exists only in Magento 2 design patterns and does not have implementation yet. For now I made it using single text field and Bootstrap Date Range Picker, customized it to show only time range. Result I save in DB in text format ("10:00-15:00" for example) which suits for my tasks. — jurgen, Jun 08 '16 at 06:33

score 0 · Answer 2 · answered Dec 23 '20 at 09:15

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-&gt;elementFactory = $elementFactory;

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

/**
 * Initialise form fields
 *
 * @return void
 */
public function _construct()
{
    $this-&gt;addColumn('from', ['label' =&gt; __('From')]);
    $this-&gt;addColumn('to', ['label' =&gt; __('To')]);
    $this-&gt;_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-&gt;_columns[$columnName]) &amp;&amp; in_array($columnName, ['from', 'to'])) {
        $element = $this-&gt;elementFactory-&gt;create('time');
        $element-&gt;setForm($this-&gt;getForm())
            -&gt;setName($this-&gt;_getCellInputElementName($columnName))
            -&gt;setHtmlId($this-&gt;_getCellInputElementId('&lt;%- _id %&gt;', $columnName));

        return str_replace(&quot;\n&quot;, '', $element-&gt;getElementHtml());
    }
     return parent::renderCellTemplate($columnName);
}

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

}

score 0 · Answer 3 · answered Sep 04 '21 at 09:33

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

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

3 Answers3

Linked