210 lines
6.8 KiB
JavaScript
210 lines
6.8 KiB
JavaScript
(function ($, gform, gform_i18n) {
|
|
|
|
/**
|
|
* @function getDatepickerI18n
|
|
* @description Return month and day of week strings for use in the datepicker instances.
|
|
* @since 2.5
|
|
*
|
|
* @returns {{
|
|
* dayNamesMin: *[],
|
|
* monthNamesShort: *[]
|
|
* }}
|
|
*/
|
|
|
|
function getDatepickerI18n() {
|
|
var i18n = gform_i18n.datepicker;
|
|
return {
|
|
dayNamesMin: [
|
|
i18n.days.sunday,
|
|
i18n.days.monday,
|
|
i18n.days.tuesday,
|
|
i18n.days.wednesday,
|
|
i18n.days.thursday,
|
|
i18n.days.friday,
|
|
i18n.days.saturday,
|
|
],
|
|
monthNamesShort: [
|
|
i18n.months.january,
|
|
i18n.months.february,
|
|
i18n.months.march,
|
|
i18n.months.april,
|
|
i18n.months.may,
|
|
i18n.months.june,
|
|
i18n.months.july,
|
|
i18n.months.august,
|
|
i18n.months.september,
|
|
i18n.months.october,
|
|
i18n.months.november,
|
|
i18n.months.december,
|
|
],
|
|
firstDay: i18n.firstDay,
|
|
iconText: i18n.iconText,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* @function getDatepickerBaseOptions
|
|
* @description Return base options object that configures the datepicker.
|
|
* @param $element The datepicker trigger.
|
|
* @since 2.5
|
|
*
|
|
* @returns {{
|
|
* suppressDatePicker: boolean,
|
|
* changeMonth: boolean,
|
|
* changeYear: boolean,
|
|
* onClose: onClose,
|
|
* yearRange: string,
|
|
* dateFormat: string,
|
|
* showOn: string,
|
|
* dayNamesMin: *[],
|
|
* monthNamesShort: *[],
|
|
* beforeShow: (function(*, *): boolean),
|
|
* showOtherMonths: boolean
|
|
* }}
|
|
*/
|
|
|
|
function getDatepickerBaseOptions( $element ) {
|
|
var i18n = getDatepickerI18n();
|
|
var isThemeDatepicker = $element.closest( '.gform_wrapper' ).length > 0;
|
|
var isPreview = $( '#preview_form_container' ).length > 0;
|
|
var isRTL = window.getComputedStyle($element[0], null).getPropertyValue('direction') === 'rtl';
|
|
var formTheme = isThemeDatepicker ? $element.closest( '.gform_wrapper' ).data( 'form-theme' ) : 'gravity-theme';
|
|
var formId = isThemeDatepicker ? $element.closest( '.gform_wrapper' ).attr( 'id' ).replace( 'gform_wrapper_', '' ) : '';
|
|
var formPageInstance = isThemeDatepicker ? $element.closest( '.gform_wrapper' ).attr( 'data-form-index' ) : '';
|
|
|
|
return {
|
|
yearRange: '-100:+20',
|
|
showOn: 'focus',
|
|
dateFormat: 'mm/dd/yy',
|
|
dayNamesMin: i18n.dayNamesMin,
|
|
monthNamesShort: i18n.monthNamesShort,
|
|
firstDay: i18n.firstDay,
|
|
changeMonth: true,
|
|
changeYear: true,
|
|
isRTL: isRTL,
|
|
showOtherMonths: isThemeDatepicker,
|
|
suppressDatePicker: false,
|
|
onClose: function() {
|
|
var self = this;
|
|
$element.focus();
|
|
this.suppressDatePicker = true;
|
|
setTimeout( function() {
|
|
self.suppressDatePicker = false;
|
|
}, 200 );
|
|
},
|
|
beforeShow: function( input, inst ) {
|
|
|
|
// Remove any classes that were added before as it could have been added to a different datepicker.
|
|
inst.dpDiv[0].classList.remove( 'gform-theme-datepicker' );
|
|
inst.dpDiv[0].classList.remove( 'gravity-theme' );
|
|
inst.dpDiv[0].classList.remove( 'gform-theme' );
|
|
inst.dpDiv[0].classList.remove( 'gform-legacy-datepicker' );
|
|
inst.dpDiv[0].classList.remove( 'gform-theme--framework' );
|
|
inst.dpDiv[0].classList.remove( 'gform-theme--foundation' );
|
|
inst.dpDiv[0].classList.remove( 'gform-theme--orbital' );
|
|
|
|
// Add classes based on the form theme
|
|
if ( isThemeDatepicker ) {
|
|
inst.dpDiv[ 0 ].classList.add( 'gform-theme-datepicker' );
|
|
$( inst.dpDiv[ 0 ] ).attr( 'data-parent-form', formId + '_' + formPageInstance );
|
|
}
|
|
|
|
if ( formTheme === undefined || formTheme === 'gravity-theme' ) {
|
|
$( inst.dpDiv[0] ).addClass( 'gravity-theme' );
|
|
} else if ( formTheme === 'legacy' ) {
|
|
$( inst.dpDiv[0] ).addClass( 'gform-legacy-datepicker' );
|
|
} else {
|
|
$( inst.dpDiv[0] ).addClass( 'gform-theme--' + formTheme );
|
|
if ( formTheme === 'orbital' ) {
|
|
$( inst.dpDiv[0] ).addClass( 'gform-theme--framework' );
|
|
$( inst.dpDiv[0] ).addClass( 'gform-theme--foundation' );
|
|
}
|
|
}
|
|
|
|
// If the form is in preview mode and the site is RTL, adjust the datepicker position.
|
|
if ( isRTL && isPreview ) {
|
|
var $inputContainer = $( input ).closest( '.gfield' );
|
|
var rightOffset = $( document ).outerWidth() - ( $inputContainer.offset().left + $inputContainer.outerWidth() );
|
|
inst.dpDiv[ 0 ].style.right = rightOffset + 'px';
|
|
}
|
|
|
|
return ! this.suppressDatePicker;
|
|
},
|
|
};
|
|
}
|
|
|
|
/**
|
|
* @function initSingleDatepicker
|
|
* @description Initialize a datepicker assigning various additional options based on the trigger element.
|
|
* @param $element The datepicker trigger.
|
|
* @since 2.4
|
|
*/
|
|
|
|
function initSingleDatepicker( $element ) {
|
|
var i18n = getDatepickerI18n();
|
|
var inputId = $element.attr( 'id' ) ? $element.attr( 'id' ) : '';
|
|
var optionsObj = getDatepickerBaseOptions( $element );
|
|
|
|
if ( $element.hasClass( 'dmy' ) ) {
|
|
optionsObj.dateFormat = 'dd/mm/yy';
|
|
} else if ( $element.hasClass( 'dmy_dash' ) ) {
|
|
optionsObj.dateFormat = 'dd-mm-yy';
|
|
} else if ( $element.hasClass( 'dmy_dot' ) ) {
|
|
optionsObj.dateFormat = 'dd.mm.yy';
|
|
} else if ( $element.hasClass( 'ymd_slash' ) ) {
|
|
optionsObj.dateFormat = 'yy/mm/dd';
|
|
} else if ( $element.hasClass( 'ymd_dash' ) ) {
|
|
optionsObj.dateFormat = 'yy-mm-dd';
|
|
} else if ( $element.hasClass( 'ymd_dot' ) ) {
|
|
optionsObj.dateFormat = 'yy.mm.dd';
|
|
}
|
|
|
|
if ( $element.hasClass( 'gdatepicker_with_icon' ) ) {
|
|
optionsObj.showOn = 'both';
|
|
optionsObj.buttonImage = $element.parent().siblings( "[id^='gforms_calendar_icon_input']" ).val();
|
|
optionsObj.buttonImageOnly = true;
|
|
optionsObj.buttonText = i18n.iconText;
|
|
} else {
|
|
optionsObj.showOn = 'focus';
|
|
}
|
|
|
|
inputId = inputId.split( '_' );
|
|
|
|
// allow the user to override the datepicker options object
|
|
optionsObj = gform.applyFilters( 'gform_datepicker_options_pre_init', optionsObj, inputId[ 1 ], inputId[ 2 ], $element );
|
|
|
|
$element.datepicker( optionsObj );
|
|
|
|
// We give the input focus after selecting a date which differs from default Datepicker behavior; this prevents
|
|
// users from clicking on the input again to open the datepicker. Let's add a manual click event to handle this.
|
|
if ( $element.is( ':input' ) ) {
|
|
$element.click( function() {
|
|
$element.datepicker( 'show' );
|
|
} );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @function initDatepickers
|
|
* @description Iterate over uninitialized datepickers and init. Exposed on window as gformInitDatepicker.
|
|
* Note: this function powers both admin and theme datepickers.
|
|
* @since 2.4
|
|
*/
|
|
|
|
function initDatepickers() {
|
|
$( '.gform-datepicker:not(.initialized)' ).each( function() {
|
|
var $element = $( this );
|
|
initSingleDatepicker( $element );
|
|
$element.addClass( 'initialized' );
|
|
} );
|
|
}
|
|
|
|
$( document ).ready( initDatepickers );
|
|
|
|
// Make all and single init functions public for add-ons.
|
|
// Naming is done in the 2.4 backwards compatible way.
|
|
window.gformInitDatepicker = initDatepickers;
|
|
window.gformInitSingleDatepicker = initSingleDatepicker;
|
|
|
|
})(jQuery, gform, gform_i18n);
|