Customize List Datepicker behavior

Docs » List Datepicker » Customize List Datepicker behavior

The behavior of the List Date Picker can be modified using the gwp_list_datepicker_options_pre_init filter.

Filter parameters for the gwp_list_datepicker_options_pre_init filter:

1. optionsObj: An object containing datepicker options. Modify this to customize behaviors like setting minimum and maximum selectable dates.
2. formId: The form’s ID. Use it to apply specific settings to certain forms.
3. fieldId: The field’s ID. Allows targeting and customizing behavior for individual fields.
4. columnId: Identifies the column in list fields. Useful for modifying options tied to particular columns.
5. element: The HTML element of the datepicker input field. Can be used to manipulate DOM properties directly.

Example: how to limit the available dates to +/- 1 month from today

1. Add a HTML Field:
   Insert this script into an HTML field within your Gravity Forms form. It is also possible to use a snippet tool like GravityWiz Code Chest.
2. Add the JavaScript Code:
   Use the code snippet below to establish the date range.

<script>
// Hook into 'gwp_list_datepicker_options_pre_init' to modify the datepicker options.
gform.addFilter('gwp_list_datepicker_options_pre_init', function (optionsObj, formId, fieldId, columnId, element) {
    // Set minDate and maxDate to -1 month and +1 month from today
    optionsObj.minDate = '-1m';
    optionsObj.maxDate = '+1m';

    return optionsObj;
});
</script>

Explanation

• minDate: Sets the earliest selectable date to one month before the current date.
• maxDate: Sets the latest selectable date to one month after the current date.

Important References

• jQuery UI Datepicker Documentation: For more details on minDate and maxDate options.
• Gravity Forms Datepicker Options: To see how similar filters work in Gravity Forms.