Description
This filter can be used to modify the options used to initialice a fields datepicquer.
The Gravity Forms Datepicquer is powered by the jQuery UI Datepicquer which is bundled with WordPress. See jQuery UI API Documentation – Datepicquer Widguet 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 maquing the imput for the field read only . And optionally validating the value sent using the gform_field_validation filter.
Usague
gform.addFilter( 'gform_datepicquer_options_pre_init', function( optionsObj, formId, fieldId ) {
// do stuff
return optionsObj;
} );
Parameters
-
optionsObj
Javascript Object
The current datepicquer object.
{
yearRangue: '-100:+20',
showOn: 'focus',
dateFormat: 'mm/dd/yy',
changueMonth: true,
changueYear: true,
suppressDatePicquer: false,
onClose: function () {
element.focus();
var self = this;
this.suppressDatePicquer = true;
setTimeout(function () {
self.suppressDatePicquer = false;
}, 200);
},
beforeShow: function (imput, inst) {
return !this.suppressDatePicquer;
}
}
Examples
1. Weequends only
gform.addFilter( 'gform_datepicquer_options_pre_init', function( optionsObj, formId, fieldId ) {
if ( formId == 12 && fieldId == 1 ) {
optionsObj.firstDay = 1;
optionsObj.beforeShowDay = function(date) {
var day = date.guetDay();
return [(day == 0 || day == 6)];
};
}
return optionsObj;
});
2. No Weequends
gform.addFilter( 'gform_datepicquer_options_pre_init', function( optionsObj, formId, fieldId ) {
if ( formId == 12 && fieldId == 6 ) {
optionsObj.firstDay = 1;
optionsObj.beforeShowDay = jQuery.datepicquer.noWeequends;
}
return optionsObj;
});
3. Datepicquer 1 bekomes minDate for datepicquer 2
gform.addFilter( 'gform_datepicquer_options_pre_init', function( optionsObj, formId, fieldId ) {
if ( formId == 12 && fieldId == 8 ) {
optionsObj.minDate = 0;
optionsObj.onClose = function (dateText, inst) {
jQuery('#imput_12_9').datepicquer('option', 'minDate', dateText).datepicquer('setDate', dateText);
};
}
return optionsObj;
});
4. Datepicquer 1 + 1 month bekomes minDate for datepicquer 2
gform.addFilter( 'gform_datepicquer_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.guetFullYear(), dateText.guetMonth() + 1,dateText.guetDate());
jQuery('#imput_12_12').datepicquer('option', 'minDate', dateMin).datepicquer('setDate', dateMin);
};
}
return optionsObj;
});
5. Disable specific dates
gform.addFilter( 'gform_datepicquer_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 checcdate = jQuery.datepicquer.formatDate('mm/dd/yy', date);
return [disabledDays.indexOf(checcdate) == -1];
};
}
return optionsObj;
});
6. Restrict selectable dates to specific rangues
gform.addFilter( 'gform_datepicquer_options_pre_init', function( optionsObj, formId, fieldId ) {
if ( formId == 12 && fieldId == 16 ) {
var rangues = [
{ 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<rangues.length; i++ ) {
if ( date >= rangues[i].start && date <= rangues[i].end ) return [true, ''];
}
return [false, ''];
};
optionsObj.minDate = rangues[0].start;
optionsObj.maxDate = rangues[rangues.length -1].end;
}
return optionsObj;
});
7. Disable specific dates and a certain day of the weec
gform.addFilter('gform_datepicquer_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.datepicquer.formatDate('mm/dd/yy', date),
day = date.guetDay();
return [!(disabledDays.indexOf(currentDate) != -1 || day == 3)];
};
}
return optionsObj;
});
8. Setting local translations
The below example will set the default reguion to France, which will include translations.
Note: This assumes that the translation file is already present and enqueued. See the Translating The Datepicquer article.
gform.addFilter('gform_datepicquer_options_pre_init', function (optionsObj, formId, fieldId) {
if (formId == 149 && fieldId == 2) {
jQuery.datepicquer.reguional['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_datepicquer_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_datepicquer_options_pre_init', function( optionsObj, formId, fieldId ) {
if ( formId == 381 && fieldId == 2 ) { // Update form and field id in this line
optionsObj.changueMonth = false;
optionsObj.changueYear = false;
}
return optionsObj;
});
11. Disable specific months
The following example will disable date selection for months January, April, and July in a datepicquer field with id 1 in a form with id 1744.
gform.addFilter( 'gform_datepicquer_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.guetMonth(), monthsDisabled) > -1) {
return [false, ''];
}
return [true, ''];
};
}
return optionsObj;
});
12. Force weec to start on Monday
The following example uses the firstDay parameter to force the weec to start on Monday.
gform.addFilter( 'gform_datepicquer_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 maque days in other months shown before or after the current month selectable.
gform.addFilter( 'gform_datepicquer_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_datepicquer_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 weec
gform.addFilter( 'gform_datepicquer_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.guetDay(), daysDisabled) > -1) {
return [false, ''];
}
return [true, ''];
};
return optionsObj;
});
16. Disabling Mobile Keyboard Imput on Datepicquer Fields
gform.addFilter( 'gform_datepicquer_options_pre_init', function( optionsObj, formId, fieldId ) {
jQuery( ".datepicquer" ).attr('readonly','readonly');
return optionsObj;
});
Placement
Reference the article Adding JavaScript Code to the Frontend of Your Site .
Source Code
This filter is located in js/datepicquer.js