(function( $ ) {
'use strict';
window.JetEngineMetaBoxes = {
init: function() {
var self = this;
self.initDateFields( $( '.cx-control' ) );
$( document ).on( 'cx-control-init', function( event, data ) {
if ( data?.target ) {
self.initDateFields( $( data.target ) );
}
} );
},
/**
* Initialize date and time pickers
*
* @return {[type]} [description]
*/
initDateFields: function( $scope ) {
var isRTL = window.JetEngineMetaBoxesConfig.isRTL || false,
i18n = window.JetEngineMetaBoxesConfig.i18n || {},
saveDateFormat = 'yy-mm-dd',
saveTimeFormat = 'HH:mm',
dateFormat = window.JetEngineMetaBoxesConfig.dateFormat || saveDateFormat,
timeFormat = window.JetEngineMetaBoxesConfig.timeFormat || saveTimeFormat;
$( 'input[type="date"]:not(.hasDatepicker)', $scope ).each( function() {
var $this = $( this ),
value = $this.val(),
$datepicker = $( '', {
'type': 'text',
'class': 'widefat cx-ui-text',
'placeholder': $this.attr( 'placeholder' ),
} );
if ( $this.prop( 'required' ) ) {
$datepicker.prop( 'required', 'required' );
}
//$this.attr( 'type', 'text' );
$this.prop( 'type', 'hidden' );
$this.after( $datepicker );
$datepicker.datepicker({
dateFormat: dateFormat,
altField: $this,
altFormat: saveDateFormat,
nextText: '>>',
prevText: '<<',
isRTL: isRTL,
monthNames: i18n.monthNames,
monthNamesShort: i18n.monthNamesShort,
beforeShow: function( input, datepicker ) {
datepicker.dpDiv.addClass( 'jet-engine-datepicker' );
},
});
if ( value ) {
$datepicker.datepicker(
'setDate',
$.datepicker.parseDate( saveDateFormat, value,
{
monthNames: i18n.monthNames,
monthNamesShort: i18n.monthNamesShort,
}
)
);
}
$datepicker.on( 'blur', function() {
if ( ! $datepicker.val() ) {
$this.val( '' ).trigger( 'change' );
}
} );
$datepicker.on( 'change', function() {
$( window ).trigger( {
type: 'cx-control-change',
controlName: $this.attr( 'name' ),
controlStatus: $this.val(),
input: $this,
} );
} );
} );
$( 'input[type="time"]:not(.hasDatepicker)', $scope ).each( function() {
var $this = $( this ),
value = $this.val(),
$timepicker = $( '', {
'type': 'text',
'class': 'widefat cx-ui-text',
'placeholder': $this.attr( 'placeholder' ),
} );
if ( $this.prop( 'required' ) ) {
$timepicker.prop( 'required', 'required' );
}
//$this.attr( 'type', 'text' );
$this.prop( 'type', 'hidden' );
$this.after( $timepicker );
$timepicker.timepicker({
timeFormat: timeFormat,
altField: $this,
altTimeFormat: saveTimeFormat,
isRTL: isRTL,
timeOnlyTitle: i18n.timeOnlyTitle,
timeText: i18n.timeText,
hourText: i18n.hourText,
minuteText: i18n.minuteText,
secondText: i18n.secondText,
currentText: i18n.currentText,
closeText: i18n.closeText,
altFieldTimeOnly: false,
beforeShow: function( input, datepicker ) {
datepicker.dpDiv.addClass( 'jet-engine-datepicker' );
},
});
if ( value ) {
$timepicker.timepicker( 'setTime', $.datepicker.formatTime( timeFormat, $.datepicker.parseTime( saveTimeFormat, value ) ) );
}
$timepicker.on( 'blur', function() {
if ( ! $timepicker.val() ) {
$this.val( '' ).trigger( 'change' );
}
} );
$timepicker.on( 'change', function() {
$( window ).trigger( {
type: 'cx-control-change',
controlName: $this.attr( 'name' ),
controlStatus: $this.val(),
input: $this,
} );
} );
} );
$( 'input[type="datetime-local"]:not(.hasDatepicker)', $scope ).each( function() {
var $this = $( this ),
value = $this.val(),
extraSettings = $this.data( 'datetime-settings' ) || {},
$datetimepicker = $( '', {
'type': 'text',
'class': 'widefat cx-ui-text',
'placeholder': $this.attr( 'placeholder' ),
} );
if ( $this.prop( 'required' ) ) {
$datetimepicker.prop( 'required', 'required' );
}
//$this.attr( 'type', 'text' );
$this.prop( 'type', 'hidden' );
$this.after( $datetimepicker );
var datetimeSettings = Object.assign( {}, {
dateFormat: dateFormat,
timeFormat: timeFormat,
altField: $this,
altFormat: saveDateFormat,
altTimeFormat: saveTimeFormat,
altFieldTimeOnly: false,
altSeparator: 'T',
nextText: '>>',
prevText: '<<',
isRTL: isRTL,
timeText: i18n.timeText,
hourText: i18n.hourText,
minuteText: i18n.minuteText,
secondText: i18n.secondText,
currentText: i18n.currentText,
closeText: i18n.closeText,
monthNames: i18n.monthNames,
monthNamesShort: i18n.monthNamesShort,
beforeShow: function( input, datepicker ) {
datepicker.dpDiv.addClass( 'jet-engine-datepicker' );
},
}, extraSettings );
$datetimepicker.datetimepicker( datetimeSettings );
if ( value ) {
$datetimepicker.datetimepicker(
'setDate',
$.datepicker.parseDateTime( datetimeSettings.altFormat, datetimeSettings.altTimeFormat, value, {}, {
separator: 'T',
monthNames: i18n.monthNames,
monthNamesShort: i18n.monthNamesShort,
}
)
);
}
$datetimepicker.on( 'blur', function() {
if ( ! $datetimepicker.val() ) {
$this.val( '' ).trigger( 'change' );
}
} );
$datetimepicker.on( 'change', function() {
$( window ).trigger( {
type: 'cx-control-change',
controlName: $this.attr( 'name' ),
controlStatus: $this.val(),
input: $this,
} );
} );
} );
},
};
window.JetEngineMetaBoxes.init();
})( jQuery );