Magento – Validate Date range in backend from in magento 2

backenddatepickergridmagento2validation

I have added datepicker in magento2 backend form using following code.

protected function _prepareForm()
{
$fieldset->addField(
        'date_started',
        'date',
        [
            'name' => 'date_started',
            'label' => __('Start Time'),
            'date_format' => $dateFormat,
            'class' => 'validate-date validate-date-range date-range-task_data-from',
            'class' => 'required-entry',
            'style' => 'width:200px'
        ]
    );
$fieldset->addField(
        'date_completed',
        'date',
        [
            'name' => 'date_completed',
            'label' => __('End Time'),
            'date_format' => $dateFormat,
            'class' => 'validate-date validate-date-range date-range-task_data-from',
            'class' => 'required-entry',
            'style' => 'width:200px',
        ]
    );
}

but this is not validating the date range.

I need to validate: date_started should be minimum today and the date_completed should be greater than date_started.

I have seen follwoing question Start and End Date Validation but it is for Magento 1.

I also have seen the documentation Date and Time Selector, Calendar widget but it is not useful for it.

My Form.php

<?php

namespace Vendor\Module\Block\Adminhtml\Task\Edit;


/**
 * Adminhtml Add New Task Form.
 */
class Form extends \Magento\Backend\Block\Widget\Form\Generic
{
/**
 * @var \Magento\Store\Model\System\Store
 */
protected $_systemStore;

/**
 * @param \Magento\Backend\Block\Template\Context $context
 * @param \Magento\Framework\Registry             $registry
 * @param \Magento\Framework\Data\FormFactory     $formFactory
 * @param array                                   $data
 */
public function __construct(
    \Magento\Backend\Block\Template\Context $context,
    \Magento\Framework\Registry $registry,
    \Magento\Framework\Data\FormFactory $formFactory,
    \Magento\Cms\Model\Wysiwyg\Config $wysiwygConfig,
    \Vendor\Module\Model\Taskstatus $options,
    array $data = []
) 
{
    $this->_options = $options;
    $this->_wysiwygConfig = $wysiwygConfig;
    parent::__construct($context, $registry, $formFactory, $data);
}

/**
 * Prepare form.
 *
 * @return $this
 */
protected function _prepareForm()
{
    $dateFormat = $this->_localeDate->getDateFormat(\IntlDateFormatter::SHORT);
    $model = $this->_coreRegistry->registry('task_data');

    $form = $this->_formFactory->create(
        ['data' => [
                        'id' => 'edit_form', 
                        'enctype' => 'multipart/form-data', 
                        'action' => $this->getData('action'), 
                        'method' => 'post'
                    ]
        ]
    );

    $form->setHtmlIdPrefix('vmtask_');
    if ($model->getTaskId()) {
        $fieldset = $form->addFieldset(
            'base_fieldset',
            ['legend' => __('Edit Task Data'), 'class' => 'fieldset-wide']
        );
        $fieldset->addField('task_id', 'hidden', ['name' => 'task_id']);
    } else {
        $fieldset = $form->addFieldset(
            'base_fieldset',
            ['legend' => __('Add Task Data'), 'class' => 'fieldset-wide']
        );
    }

    $fieldset->addField(
        'task_name',
        'text',
        [
            'name' => 'task_name',
            'label' => __('Task Name'),
            'id' => 'task_name',
            'title' => __('Task Name'),
            'class' => 'required-entry',
            'required' => true,
        ]
    );

    $wysiwygConfig = $this->_wysiwygConfig->getConfig(['tab_id' => $this->getTabId()]);

    $fieldset->addField(
        'task_description',
        'editor',
        [
            'name' => 'task_description',
            'label' => __('Task Description'),
            'style' => 'height:36em;',
            'required' => true,
            'config' => $wysiwygConfig
        ]
    );


    $fieldset->addField(
        'date_started',
        'date',
        [
            'name' => 'date_started',
            'label' => __('Start Time'),
            'date_format' => $dateFormat,
            'class' => 'validate-date validate-date-range date-range-task_data-from',
            'class' => 'required-entry',
            'style' => 'width:200px',
            'datePickerOptions'=> array(
                        'maxDate'=> 'new Date()'
                        )
        ]
    )->setAfterElementHtml("<script type=\"text/javascript\">
    //<![CDATA[
      require([
      'jquery',
      'mage/calendar'
        ], function($){
               $('#date_started').calendar({           
               hideIfNoPrevNext: true,
               minDate: new Date(),
               showOn: 'button',
            });
        });         
    //]]>
    </script>");
    $fieldset->addField(
        'date_completed',
        'date',
        [
            'name' => 'date_completed',
            'label' => __('End Time'),
            'date_format' => $dateFormat,
            'class' => 'validate-date validate-date-range date-range-task_data-from',
            'class' => 'required-entry',
            'style' => 'width:200px',
        ]
    )->setAfterElementHtml("<script type=\"text/javascript\">
    //<![CDATA[
      require([
      'jquery',
      'mage/calendar'
        ], function($){
        $('#date_completed').click(function(event) {
            var maxD = $('#date_started').value();
               $('#date_completed').calendar({           
               hideIfNoPrevNext: true,
               minDate: maxD,
               showOn: 'button'

            });    });
            });
    //]]>
    </script>");

    $form->setValues($model->getData());
    $form->setUseContainer(true);
    $this->setForm($form);

    return parent::_prepareForm();
}

}

Thanks

Best Answer

Use ->setAfterElementHtml to fieldset.

$fieldsetDirector->addField(
        'date_started',
        'date',
        [
            'name' => 'date_started',
            'label' => __('Start Time'),
            'date_format' => 'yyyy-MM-dd',                
            'class' => 'required-entry',
            'style' => 'width:200px'
        ]
    )->setAfterElementHtml("<script type=\"text/javascript\">
        //<![CDATA[
          require([
          'jquery',
          'mage/calendar'
            ], function($){
                   $('#date_started').calendar({           
                   hideIfNoPrevNext: true,
                   minDate: new Date(),
                   showOn: 'button',
                   dateFormat: 'yyyy-MM-dd'
                });    });         
        //]]>
        </script>");
    $fieldsetDirector->addField(
        'date_completed',
        'date',
        [
            'name' => 'date_completed',
            'label' => __('End Time'),
            'date_format' => 'yyyy-MM-dd',                
            'class' => 'required-entry',
            'style' => 'width:200px',
        ]
    )->setAfterElementHtml("<script type=\"text/javascript\">
        //<![CDATA[
          require([
          'jquery',
          'mage/calendar'
            ], function($){
            $('#date_completed').click(function(event) {
                var maxD = 'Find Start date field value';
                   $('#date_completed').calendar({           
                   hideIfNoPrevNext: true,
                   minDate: maxD,
                   showOn: 'button',
                   dateFormat: 'yyyy-MM-dd'
                });    });
                });
        //]]>
        </script>");

Note : For date_completed field validation you have to find date_started field value and set value in date_completed field minDate.

Related Topic