138 lines
5.2 KiB
PHP
138 lines
5.2 KiB
PHP
<?php
|
|
|
|
|
|
use Elementor\Base_Data_Control;
|
|
use Elementor\Modules\DynamicTags\Module as TagsModule;
|
|
|
|
class Control_Persian_Date_Picker extends Base_Data_Control {
|
|
|
|
/**
|
|
* Get date time control type.
|
|
*
|
|
* Retrieve the control type, in this case `date_time`.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
*
|
|
* @return string Control type.
|
|
*/
|
|
public function get_type() {
|
|
return 'persian_date_picker';
|
|
}
|
|
|
|
/**
|
|
* Get date time control default settings.
|
|
*
|
|
* Retrieve the default settings of the date time control. Used to return the
|
|
* default settings while initializing the date time control.
|
|
*
|
|
* @since 1.8.0
|
|
* @access protected
|
|
*
|
|
* @return array Control default settings.
|
|
*/
|
|
protected function get_default_settings() {
|
|
return [
|
|
'label_block' => true,
|
|
'picker_options' => [],
|
|
'dynamic' => [
|
|
'categories' => [
|
|
TagsModule::DATETIME_CATEGORY,
|
|
],
|
|
],
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Render date time control output in the editor.
|
|
*
|
|
* Used to generate the control HTML in the editor using Underscore JS
|
|
* template. The variables for the class are available using `data` JS
|
|
* object.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
*/
|
|
public function content_template() {
|
|
$document = \Elementor\Plugin::$instance->documents->get( get_the_ID() );
|
|
$value = get_option( 'my_custom_elementor_checkbox' );
|
|
if ( $document instanceof \Elementor\Core\DocumentTypes\PageBase ) {
|
|
if ( strlen($value) < 1 ) {
|
|
wp_enqueue_style( 'pDate-style', plugins_url( 'elementor-pro' ) . '/megatheme/includes/assets/css/persian-datepicker.min.css', [], null );
|
|
|
|
wp_enqueue_script( 'pDate',plugins_url('elementor-pro') . '/megatheme/includes/assets/js/persian-date.min.js', ['jquery'], null, true );
|
|
wp_enqueue_script( 'pDatepicker',plugins_url('elementor-pro') . '/megatheme/includes/assets/js/persian-datepicker.min.js', ['pDate'], null, true );
|
|
wp_enqueue_script( 'pDatepickerLoader',plugins_url('elementor-pro') .'/megatheme/includes/assets/js/persian-datepicker-loader.js', ['pDatepicker'], null, true );
|
|
?>
|
|
|
|
<div class="elementor-control-field">
|
|
<label for="<?php $this->print_control_uid(); ?>" class="elementor-control-title">{{{ data.label }}}</label>
|
|
<div class="elementor-control-input-wrapper elementor-control-dynamic-switcher-wrapper">
|
|
<input onclick="(function(value){value=value.replace('_fake','');jQuery('#'+value+'_fake').pDatepicker({
|
|
format: 'YYYY-MM-DD HH:mm',
|
|
autoClose: true,
|
|
timePicker: {
|
|
enabled: true
|
|
},
|
|
formatter: function (unix) {
|
|
let date = new Date(unix);
|
|
|
|
let year = date.getFullYear();
|
|
let month = ('0' + (date.getMonth() + 1)).slice(-2);
|
|
let day = ('0' + date.getDate()).slice(-2);
|
|
let hours = ('0' + date.getHours()).slice(-2);
|
|
let minutes = ('0' + date.getMinutes()).slice(-2);
|
|
|
|
let formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
|
|
|
|
let element = document.getElementById(value);
|
|
|
|
if (element) {
|
|
element.value = formattedDate;
|
|
// Create a new 'input' event
|
|
let event = new Event('input', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
});
|
|
|
|
// Dispatch the event
|
|
element.dispatchEvent(event);
|
|
} else {
|
|
console.log('Element not found!');
|
|
}
|
|
|
|
return formattedDate;
|
|
}
|
|
})})(this.id)" id="<?php $this->print_control_uid(); ?>_fake" placeholder="" class="elementor-date-time-picker elementor-control-tag-area" type="text" data-setting="{{ data.name }}" readonly="readonly">
|
|
|
|
<input style="position:absolute;opacity: 0;z-index: -1" id="<?php $this->print_control_uid(); ?>" placeholder="{{ view.getControlPlaceholder() }}" class="elementor-date-time-picker elementor-control-tag-area" type="text" data-setting="{{ data.name }}">
|
|
</div>
|
|
</div>
|
|
<# if ( data.description ) { #>
|
|
<div class="elementor-control-field-description">{{{ data.description }}}</div>
|
|
<# } #>
|
|
<?php
|
|
} else {
|
|
?>
|
|
|
|
<div class="elementor-control-field">
|
|
<label for="<?php $this->print_control_uid(); ?>" class="elementor-control-title">{{{ data.label }}}</label>
|
|
<div class="elementor-control-input-wrapper elementor-control-dynamic-switcher-wrapper">
|
|
<input id="<?php $this->print_control_uid(); ?>" placeholder="{{ view.getControlPlaceholder() }}" class="elementor-date-time-picker elementor-control-tag-area" type="text" data-setting="{{ data.name }}">
|
|
</div>
|
|
</div>
|
|
<# if ( data.description ) { #>
|
|
<div class="elementor-control-field-description">{{{ data.description }}}</div>
|
|
<# } #>
|
|
<?php
|
|
}
|
|
}
|
|
?>
|
|
|
|
<?php
|
|
}
|
|
}
|
|
|
|
|
|
|