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

9

1 Answer 1

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/

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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