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.
Note : For
date_completed
field validation you have to finddate_started
field value and set value indate_completed
fieldminDate
.