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
<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.
{
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
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
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
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
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
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
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
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.
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.
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
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.
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.
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.
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.
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
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