listFieldDatepicker.js

function listFieldDatepicker(formId, fieldId, column) {
    var listField = '#field_' + formId + '_' + fieldId,
        columnClass = '.gfield_list_' + fieldId + '_cell' + column + ' input';
    jQuery.datepicker.setDefaults({
        showOn: 'both',
        buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png',
        buttonImageOnly: true,
        dateFormat: 'dd/mm/yy',
        firstDay: 1
    });
    jQuery(columnClass).css({'width': '80%', 'margin-right': '2px'}).datepicker();
    jQuery(listField).on('click', '.add_list_item', function () {
        jQuery('.ui-datepicker-trigger').remove();
        jQuery(columnClass).removeClass('hasDatepicker').removeAttr('id').datepicker();
    });
}
listFieldDatepicker(140, 1, 3);
//listFieldDatepicker(form id, list field id, list field column number);

Hi Richard -

I'm trying to implement this and it's not working. I assume that all 'formId's are changed to the form ID, all fieldId is changed to the fieldID an the column is changed to the column so that if my FormID were 27, FieldID was 7 and Column was 1, it would look like below. What am I doing incorrectly?

If it's also helpful to know, I've also changed only the code in line 17 and that also didn't seem to work. I am sorry if these are silly questions!

Thank you for your help!
Rosi

• script -
  function listFieldDatepicker(27, 7, 1) {
  var listField = '#field_' + 27 + '' + 7,
  columnClass = '.gfield_list' + 7 + '_cell' + 1 + ' input';
  jQuery.datepicker.setDefaults({
  showOn: 'both',
  buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png',
  buttonImageOnly: true,
  dateFormat: 'dd/mm/yy',
  firstDay: 1
  });
  jQuery(columnClass).css({'width': '80%', 'margin-right': '2px'}).datepicker();
  jQuery(listField).on('click', '.add_list_item', function () {
  jQuery('.ui-datepicker-trigger').remove();
  jQuery(columnClass).removeClass('hasDatepicker').removeAttr('id').datepicker();
  });
  }
  listFieldDatepicker(27, 7, 1);
  //listFieldDatepicker(form id, list field id, list field column number);
  • /script -

Indeed, does not work for me either

Make sure the "jQuery UI date picker" script is loaded otherwise you will have errors when the datepicker.setDefaults is called and the above script will not work. The error most likely when you do an inspect on your page console will be "Uncaught TypeError: Cannot read properties of undefined (reading 'setDefaults')".

Since GF loads that script with date fields you don't want to load it manually to avoid conflicts. You can add a hidden date field with the form unless you already have a date picker field in the form available.