How to add a date picker recursively in magento2 admin form

Question

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:

Answer 1

<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/