3

How to add a date picker recursively in backend ?

System.xml

 <field id="mapping" translate="label comment tooltip" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="0">
                    <label>Date off</label>
                    <frontend_model>Companyname\DeliveryDate\Block\Adminhtml\System\Config\Form\Field\Datemap</frontend_model>
                    <backend_model>Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</backend_model>
                    <comment>                        <![CDATA[Allows admins to choose any date off that they want]]>
                    </comment>
                </field>

My code:

<?php
namespace Companyname\DeliveryDate\Block\Adminhtml\System\Config\Form\Field;

class Datemap extends \Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray
{
    /**
     * @var \Magento\Framework\Data\Form\Element\Factory
     */
    protected $_elementFactory;

    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Framework\Data\Form\Element\Factory $elementFactory
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Data\Form\Element\Factory $elementFactory,
        array $data = []
    )
    {
        $this->_elementFactory  = $elementFactory;
        parent::__construct($context,$data);
    }
    protected function _construct()
    {
        $this->addColumn('field1', ['label' => __('Date'), 'class' => 'input-text required-entry field']);
        $this->_addAfter = false;
        $this->_addButtonLabel = __('Add');
        parent::_construct();
    }

}
?>
<script>
 require([ "jquery", "mage/calendar" ], 
function($){
 $(".field").calendar({ 
 changeYear:true, 
changeMonth:true, 
yearRange: "1970:2050", 
buttonText:"Select Date", 
dateFormat:"dd-mm-yy"
}); 
});
 </script>

My output is:

enter image description here

2
<script>
    require([ "jquery", "mage/calendar" ], 
        function($){
            $('body').on('focus',".field", function(){

            $(".field").calendar({ 
                changeYear:true, 
                changeMonth:true, 
                yearRange: "1970:2050", 
                buttonText:"Select Date", 
                dateFormat:"dd-mm-yy"
                }); 
            });
        });
</script>

OR

http://jsfiddle.net/j08691/vdFaH/1/

  • Hi Divya you can choose any one method – Birjitsinh Zala Feb 18 at 10:37
  • its working fine but i need it to appear without focus is there any chance @Birjitsinh – divya sekar Feb 18 at 10:47
  • 1
    have you try secound optiojn?$('#addnew').click(function() {//add code here}); – Birjitsinh Zala Feb 18 at 10:49
  • i will tried and update u – divya sekar Feb 18 at 10:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.