Description
This filter can be used to modify the options used to initialize a fields datepicker.
The Gravity Forms Datepicker is powered by the jQuery UI Datepicker which is bundled with WordPress. See jQuery UI API Documentation – Datepicker Widget for all the possible options you can use with this filter.
For cases where you are going to set a restriction (e.g. limiting dates), you may want to harden the restriction making the input for the field read only. And optionally validating the value sent using the gform_field_validation filter.
Usage
1 2 3 4 5 6 7 | <script> gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { // do stuff return optionsObj; } ); </script> |
Parameters
- optionsObj Javascript Object
The current datepicker object.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | { yearRange: '-100:+20' , showOn: 'focus' , dateFormat: 'mm/dd/yy' , changeMonth: true , changeYear: true , suppressDatePicker: false , onClose: function () { element.focus(); var self = this ; this .suppressDatePicker = true ; setTimeout( function () { self.suppressDatePicker = false ; }, 200); }, beforeShow: function (input, inst) { return ! this .suppressDatePicker; } } |
Examples
1. Weekends only
1 2 3 4 5 6 7 8 9 10 | gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { if ( formId == 12 && fieldId == 1 ) { optionsObj.firstDay = 1; optionsObj.beforeShowDay = function (date) { var day = date.getDay(); return [(day == 0 || day == 6)]; }; } return optionsObj; }); |
2. No Weekends
1 2 3 4 5 6 7 | gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { if ( formId == 12 && fieldId == 6 ) { optionsObj.firstDay = 1; optionsObj.beforeShowDay = jQuery.datepicker.noWeekends; } return optionsObj; }); |
3. Datepicker 1 becomes minDate for datepicker 2
1 2 3 4 5 6 7 8 9 | gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { if ( formId == 12 && fieldId == 8 ) { optionsObj.minDate = 0; optionsObj.onClose = function (dateText, inst) { jQuery( '#input_12_9' ).datepicker( 'option' , 'minDate' , dateText).datepicker( 'setDate' , dateText); }; } return optionsObj; }); |
4. Datepicker 1 + 1 month becomes minDate for datepicker 2
1 2 3 4 5 6 7 8 9 10 11 | gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { if ( formId == 12 && fieldId == 11 ) { optionsObj.minDate = 0; optionsObj.onClose = function (dateText, inst) { dateText = new Date(dateText); dateMin = new Date(dateText.getFullYear(), dateText.getMonth() + 1,dateText.getDate()); jQuery( '#input_12_12' ).datepicker( 'option' , 'minDate' , dateMin).datepicker( 'setDate' , dateMin); }; } return optionsObj; }); |
5. Disable specific dates
1 2 3 4 5 6 7 8 9 10 | gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { if ( formId == 12 && fieldId == 14 ) { var disabledDays = [ '06/15/2014' , '07/01/2014' , '07/15/2014' ]; optionsObj.beforeShowDay = function (date) { var checkdate = jQuery.datepicker.formatDate( 'mm/dd/yy' , date); return [disabledDays.indexOf(checkdate) == -1]; }; } return optionsObj; }); |
6. Restrict selectable dates to specific ranges
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { if ( formId == 12 && fieldId == 16 ) { var ranges = [ { start: new Date( '06/15/2014' ), end: new Date( '06/25/2014' ) }, { start: new Date( '07/15/2014' ), end: new Date( '07/25/2014' ) }, { start: new Date( '08/15/2014' ), end: new Date( '08/25/2014' ) } ]; optionsObj.beforeShowDay = function (date) { for ( var i=0; i<ranges.length; i++ ) { if ( date >= ranges[i].start && date <= ranges[i].end ) return [ true , '' ]; } return [ false , '' ]; }; optionsObj.minDate = ranges[0].start; optionsObj.maxDate = ranges[ranges.length -1].end; } return optionsObj; }); |
7. Disable specific dates and a certain day of the week
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | gform.addFilter( 'gform_datepicker_options_pre_init' , function (optionsObj, formId, fieldId) { if (formId == 149 && fieldId == 2) { optionsObj.firstDay = 1; optionsObj.beforeShowDay = function (date) { var disabledDays = [ '06/15/2015' , '06/16/2015' , '06/18/2015' ], currentDate = jQuery.datepicker.formatDate( 'mm/dd/yy' , date), day = date.getDay(); return [!(disabledDays.indexOf(currentDate) != -1 || day == 3)]; }; } return optionsObj; }); |
8. Setting local translations
The below example will set the default region to France, which will include translations.
Note: This assumes that the translation file is already present and enqueued. See the Translating The Datepicker article.
1 2 3 4 5 6 7 | gform.addFilter( 'gform_datepicker_options_pre_init' , function (optionsObj, formId, fieldId) { if (formId == 149 && fieldId == 2) { jQuery.datepicker.regional[ 'fr' ] } return optionsObj; }); |
9. Disable past dates
The snippet below will disable any past date and allow only to select current and future dates.
1 2 3 4 5 6 7 | gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { // Apply to field 2 only if ( fieldId == 2 ) { optionsObj.minDate = 0; } return optionsObj; }); |
10. Disable month and year selection
1 2 3 4 5 6 7 | gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { if ( formId == 381 && fieldId == 2 ) { // Update form and field id in this line optionsObj.changeMonth = false ; optionsObj.changeYear = false ; } return optionsObj; }); |
11. Disable specific months
The following example will disable date selection for months January, April, and July in a datepicker field with id 1 in a form with id 1744.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { if ( formId == 1744 && fieldId == 1 ) { // Months to disable (0 for January, 1 February, etc...) monthsDisabled = [0, 3, 6]; optionsObj.beforeShowDay = function (date) { if (jQuery.inArray(date.getMonth(), monthsDisabled) > -1) { return [ false , '' ]; } return [ true , '' ]; }; } return optionsObj; }); |
12. Force week to start on Monday
The following example uses the firstDay parameter to force the week to start on Monday.
1 2 3 4 5 | gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { // Sunday is 0, Monday is 1, etc. optionsObj.firstDay = 1; return optionsObj; }); |
13. Allow selection for other months days
The following example uses the selectOtherMonths parameter to make days in other months shown before or after the current month selectable.
1 2 3 4 5 | gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { // Allow selection for other months days. optionsObj.selectOtherMonths = true ; return optionsObj; }); |
14. Hide dates in other months
The following example uses the showOtherMonths parameter to hide dates in other months (non-selectable) at the start or end of the current month.
1 2 3 4 5 | gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { // Turn off displaying of dates in other months (non-selectable). optionsObj.showOtherMonths = false ; return optionsObj; }); |
15. Disable specific days of the week
1 2 3 4 5 6 7 8 9 10 11 12 | gform.addFilter( 'gform_datepicker_options_pre_init' , function ( optionsObj, formId, fieldId ) { // Days to disable. Possible values from 0 (Sunday) to 6 (Saturday). daysDisabled = [0, 5]; // Disable Sunday and Friday. optionsObj.beforeShowDay = function (date) { if (jQuery.inArray(date.getDay(), daysDisabled) > -1) { return [ false , '' ]; } return [ true , '' ]; }; return optionsObj; }); |
Placement
Your code snippet can be placed in an HTML field on your form or in a theme custom JavaScript file.
See also the JavaScript/jQuery section in this article: Where Do I Put This Code?
Source Code
This filter is located in js/datepicker.js