Magento2: Dynamic rows date column in stores configuration

[theodorhanu]

Date column in dynamic rows stores -> configuration field throws SyntaxError: Invalid or unexpected token error.

Preconditions

1. Magento 2.1.1
2. PHP 7

Steps to reproduce

1. Create a custom module with system.xml containing a dynamic field which uses a class extending Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray
2. Use \Magento\Framework\View\Element\Html\Date as a column renderer

Expected result

1. Dynamic rows system config field with date type column

Actual result

From and To Columns should be date type

1. 

[theodorhanu]

Adding any javascript to column renderer( like \Magento\Framework\View\Element\Html\Date does ) will break functionality of dynamic rows

[theodorhanu]

Hi all!
Sorry for my ( very ) late response.
It seems like the comment formatter did not helped here.
Here is a snippet of my code:

namespace [Your namespace here];
use Magento\Framework\View\Element\Html\Date;
class DateField extends Date{

    /**
     * Render block HTML
     *
     * @return string
     * @SuppressWarnings(PHPMD.NPathComplexity)
     */
    protected function _toHtml() {
        $html = '<input type="text" name="' . $this->getInputName() . '" id="' . $this->getInputId() . '" ';
        $html .= 'value="<%- ' . $this->getColumnName() .' %>" ';
        $html .= 'class="' . $this->getClass() . '" ' . $this->getExtraParams() . '/> ';
        $calendarYearsRange = $this->getYearsRange();
        $changeMonth        = $this->getChangeMonth();
        $changeYear         = $this->getChangeYear();
        $maxDate            = $this->getMaxDate();
        $showOn             = $this->getShowOn();

        $html .= '<script type="text/javascript">require(["jquery", "mage/calendar"], function($){ $("#' .
                 $this->getInputId() .
                 '").calendar({showsTime: ' .
                 ( $this->getTimeFormat() ? 'true' : 'false' ) .
                 ',' .
                 ( $this->getTimeFormat() ? 'timeFormat: "' .
                                            $this->getTimeFormat() .
                                            '",' : '' ) .
                 'dateFormat: "' .
                 $this->getDateFormat() .
                 '",buttonImage: "' .
                 $this->getImage() .
                 '",' .
                 ( $calendarYearsRange ? 'yearRange: "' .
                                         $calendarYearsRange .
                                         '",' : '' ) .
                 'buttonText: "' .
                 (string) new \Magento\Framework\Phrase(
                     'Select Date'
                 ) .
                 '"' . ( $maxDate ? ', maxDate: "' . $maxDate . '"' : '' ) .
                 ( $changeMonth === null ? '' : ', changeMonth: ' . $changeMonth ) .
                 ( $changeYear === null ? '' : ', changeYear: ' . $changeYear ) .
                 ( $showOn ? ', showOn: "' . $showOn . '"' : '' ) .
                 '})});<\'+\'/script>';

        return $html;
    }
}

Please not the last part of the _toHtml method. The backslash is escaped inside string

[tristanhofman]

@theodorhanu Thx for your quick answer! It seems to work but when I select a date from the datepicker, the input field remains empty.

[theodorhanu]

Here is a snippet of my system.xml
<group id="production_holidays" translate="label" showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="1"> <label>Production Holidays</label> <field id="interval" translate="label" showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="1"> <label>Production Holidays</label> <frontend_model>Namespace\Module\Block\Adminhtml\System\Config\Holidays</frontend_model> <backend_model>Namespace\Module\Model\System\Config\Holidays</backend_model> </field> </group>

Now, the Namespace\Module\Block\Adminhtml\System\Config\Holidays.php looks like this:

namespace Namespace\Module\Block\Adminhtml\System\Config;
use Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray;
class Holidays extends AbstractFieldArray {

    private $_dateRenderer;

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        //\Magento\Framework\View\Element\Html\Date $dateRenderer,
        array $data = []
    ) {
        //$this->_dateRenderer = $dateRenderer;
        parent::__construct( $context, $data );

    }

    protected function _getDateColumnRenderer() {
        if( !$this->_dateRenderer ) {
            $this->_dateRenderer = $this->getLayout()->createBlock(
                'Namespace\Module\Block\Adminhtml\System\Config\DateField',
                '',
                [
                    'data' => [
                        'is_render_to_js_template' => true,
                        'date_format'              => 'dd/mm/Y'
                    ]
                ]
            );
        }

        return $this->_dateRenderer;
    }

    protected function _prepareToRender() {
        $this->addColumn( 'from', [ 'label' => __( 'From' ), 'renderer' => $this->_getDateColumnRenderer() ] );
        $this->addColumn( 'to', [ 'label' => __( 'To' ), 'renderer' => $this->_getDateColumnRenderer() ] );
        $this->addColumn( 'holiday', [ 'label' => __( 'Holiday' ), 'renderer' => false ] );

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


    /**
     * Prepare existing row data object
     *
     * @param \Magento\Framework\DataObject $row
     *
     * @return void
     */
    protected function _prepareArrayRow( \Magento\Framework\DataObject $row ) {

        $data = $row->getData();
        if( count( $data['column_values'] ) ) {
            $new_data = [
                'from'          => $data[0],
                'to'            => $data[1],
                'holiday'       => $data[2],
                '_id'           => $data['_id'],
                'column_values' => [
                    $data['_id'] . '_from'    => $data[0],
                    $data['_id'] . '_to'      => $data[1],
                    $data['_id'] . '_holiday' => $data[2]
                ]
            ];
        } else {
            $new_data = [
                'from'          => '',
                'to'            => '',
                'holiday'       => '',
                '_id'           => $data['_id'],
                'column_values' => []
            ];
        }
        $row->setData( $new_data );

    }
}

And the Namespace\Module\Block\Adminhtml\System\Config\DateField.php is as posted in previous comment.

LE: I'm using Magento ver. 2.1.4. Did not have time to update to latest magento version, but I don't think it changed that much

[tristanhofman]

Awesome! thx man, great help! :)

[magento-engcom-team]

@theodorhanu, thank you for your report.
We've created internal ticket(s) MAGETWO-83352 to track progress on the issue.

[magento-engcom-team]

@theodorhanu, thank you for your report.

Unfortunately, we are archiving this ticket now as it did not get much attention from both Magento Community and Core developers for an extended period. This is done in an effort to create a quality, community-driven backlog which will allow us to allocate the required attention more easily.

Please feel free to comment, reopen or create new ticket according to the Issue reporting guidelines
if you are still facing this issue on the latest 2.4-develop branch. Thank you for collaboration.