gravity-forms-show-datepicker-in-list-field.js

/**
 * This snippet will add a datepicker to the list field of Gravity Forms.
 * Just copy paste this snippet and complete the configuration at the bottom
 * Also make sure that Jquery UI is loaded otherwise this won't work (<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>)
 *
 * @author Johan d'Hollander
 * @link <https://geekontheroad.com>
 **/

jQuery(document).ready(function() {
    /*add datepicker to list field*/
    function gotrListFieldDatepicker(formId, fieldId, column) {
        let listField = '#field_' + formId + '_' + fieldId;
        let columnClass = '.gfield_list_' + fieldId + '_cell' + column + ' input';

        jQuery(columnClass).datepicker({gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, dateFormat: 'dd/mm/yy', });
        
        jQuery(columnClass).css({'width': '80%', 'margin-right': '2px'});

        jQuery(listField).on('click', '.add_list_item', function () {
                jQuery('.ui-datepicker-trigger').remove();
                jQuery(columnClass).removeClass('hasDatepicker').removeAttr('id').datepicker({gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, dateFormat: 'dd/mm/yy', });
            
        });
    }

    /**
     * Configure here
     * formid, field_id, list_column_id
     **/
    gotrListFieldDatepicker(77, 1, 1);
    
});