add_style_depends('flatpickr'); foreach ($this->get_locales() as $key => $value) { wp_register_script( 'flatpickr-'.$key, plugin_dir_url(__FILE__) . '../../public/assets/js/lang/'. $key .'.js', false, null, true ); } } public function get_name() { return 'mf-date'; } public function get_title() { return esc_html__( 'Date', 'metform' ); } public function show_in_panel() { return 'metform-form' == get_post_type(); } public function get_categories() { return [ 'metform' ]; } public function get_keywords() { return ['metform', 'input', 'date', 'calendar']; } public function get_locales() { return [ 'sq' => esc_html__( 'Albanian', 'metform' ), 'ar' => esc_html__( 'Arabic', 'metform' ), 'at' => esc_html__( 'Austria', 'metform' ), 'az' => esc_html__( 'Azerbaijan', 'metform' ), 'bn' => esc_html__( 'Bangla', 'metform' ), 'be' => esc_html__( 'Belarusian', 'metform' ), 'bs' => esc_html__( 'Bosnian', 'metform' ), 'bg' => esc_html__( 'Bulgarian', 'metform' ), 'my' => esc_html__( 'Burmese', 'metform' ), 'cat' => esc_html__( 'Catalan', 'metform' ), 'hr' => esc_html__( 'Croatian', 'metform' ), 'cs' => esc_html__( 'Czech', 'metform' ), 'da' => esc_html__( 'Danish', 'metform' ), 'nl' => esc_html__( 'Dutch', 'metform' ), '' => esc_html__( 'English', 'metform' ), 'eo' => esc_html__( 'Esperanto', 'metform' ), 'et' => esc_html__( 'Estonian', 'metform' ), 'fo' => esc_html__( 'Faroese', 'metform' ), 'fi' => esc_html__( 'Finnish', 'metform' ), 'fr' => esc_html__( 'French', 'metform' ), 'ka' => esc_html__( 'Georgian', 'metform' ), 'de' => esc_html__( 'German', 'metform' ), 'gr' => esc_html__( 'Greek', 'metform' ), 'he' => esc_html__( 'Hebrew', 'metform' ), 'hi' => esc_html__( 'Hindi', 'metform' ), 'hu' => esc_html__( 'Hungarian', 'metform' ), 'is' => esc_html__( 'Icelandic', 'metform' ), 'id' => esc_html__( 'Indonesian', 'metform' ), 'it' => esc_html__( 'Italian', 'metform' ), 'ja' => esc_html__( 'Japanese', 'metform' ), 'kz' => esc_html__( 'Kazakh', 'metform' ), 'km' => esc_html__( 'Khmer', 'metform' ), 'ko' => esc_html__( 'Korean', 'metform' ), 'lv' => esc_html__( 'Latvian', 'metform' ), 'lt' => esc_html__( 'Lithuanian', 'metform' ), 'mk' => esc_html__( 'Macedonian', 'metform' ), 'ms' => esc_html__( 'Malaysian', 'metform' ), 'zh' => esc_html__( 'Mandarin', 'metform' ), 'zh-tw' => esc_html__( 'MandarinTraditional', 'metform' ), 'mn' => esc_html__( 'Mongolian', 'metform' ), 'no' => esc_html__( 'Norwegian', 'metform' ), 'fa' => esc_html__( 'Persian', 'metform' ), 'pl' => esc_html__( 'Polish', 'metform' ), 'pt' => esc_html__( 'Portuguese', 'metform' ), 'pa' => esc_html__( 'Punjabi', 'metform' ), 'ro' => esc_html__( 'Romanian', 'metform' ), 'ru' => esc_html__( 'Russian', 'metform' ), 'sr' => esc_html__( 'Serbian', 'metform' ), 'sr-cyr' => esc_html__( 'SerbianCyrillic', 'metform' ), 'si' => esc_html__( 'Sinhala', 'metform' ), 'sk' => esc_html__( 'Slovak', 'metform' ), 'sl' => esc_html__( 'Slovenian', 'metform' ), 'es' => esc_html__( 'Spanish', 'metform' ), 'sv' => esc_html__( 'Swedish', 'metform' ), 'th' => esc_html__( 'Thai', 'metform' ), 'tr' => esc_html__( 'Turkish', 'metform' ), 'uk' => esc_html__( 'Ukrainian', 'metform' ), 'vn' => esc_html__( 'Vietnamese', 'metform' ), 'cy' => esc_html__( 'Welsh', 'metform' ), ]; } public function get_help_url() { return 'https://wpmet.com/doc/form-widgets/#date'; } protected function register_controls() { $this->start_controls_section( 'content_section', [ 'label' => esc_html__( 'Content', 'metform' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->input_content_controls(); $this->end_controls_section(); $this->start_controls_section( 'settings_section', [ 'label' => esc_html__( 'Settings', 'metform' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->input_setting_controls(); $this->add_control( 'mf_input_validation_type', [ 'label' => __( 'Validation Type', 'metform' ), 'type' => \Elementor\Controls_Manager::HIDDEN, 'default' => 'none', ] ); $this->add_control( 'mf_input_min_date_today', [ 'label' => esc_html__( 'Set current date as minimum date', 'metform' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'metform' ), 'label_off' => esc_html__( 'No', 'metform' ), 'return_value' => 'today', 'default' => '', ] ); $this->add_control( 'mf_input_min_date', [ 'label' => esc_html__( 'Set minimum date manually', 'metform' ), 'type' => Controls_Manager::DATE_TIME, 'picker_options' => [ 'enableTime' => false, ], 'condition' => [ 'mf_input_min_date_today' => '' ] ] ); $this->add_control( 'mf_input_max_date', [ 'label' => esc_html__( 'Set maximum date manually', 'metform' ), 'type' => Controls_Manager::DATE_TIME, 'picker_options' => [ 'enableTime' => false, ], ] ); $repeater = new Repeater(); $repeater->add_control( 'mf_input_disable_date', [ 'label' => esc_html__( 'Disable date : ', 'metform' ), 'type' => Controls_Manager::DATE_TIME, 'picker_options' => [ 'enableTime' => false, ], ] ); $this->add_control( 'mf_input_disable_date_list', [ 'label' => esc_html__( 'Disable date List', 'metform' ), 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'title_field' => '{{{ mf_input_disable_date }}}', ] ); $this->add_control( 'mf_input_range_date', [ 'label' => esc_html__( 'Range date input ?', 'metform' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'metform' ), 'label_off' => esc_html__( 'No', 'metform' ), 'return_value' => 'yes', 'default' => 'no', ] ); $this->add_control( 'mf_input_year_select', [ 'label' => esc_html__( 'Year input ?', 'metform' ), 'type' => Controls_Manager::SWITCHER, 'yes' => esc_html__( 'Yes', 'metform' ), 'no' => esc_html__( 'No', 'metform' ), 'return_value' => 'yes', 'default' => 'yes', ] ); $this->add_control( 'mf_input_month_select', [ 'label' => esc_html__( 'Month input ?', 'metform' ), 'type' => Controls_Manager::SWITCHER, 'yes' => esc_html__( 'Yes', 'metform' ), 'no' => esc_html__( 'No', 'metform' ), 'return_value' => 'yes', 'default' => 'yes', ] ); $this->add_control( 'mf_input_date_select', [ 'label' => esc_html__( 'Date input ?', 'metform' ), 'type' => Controls_Manager::SWITCHER, 'yes' => esc_html__( 'Yes', 'metform' ), 'no' => esc_html__( 'No', 'metform' ), 'return_value' => 'yes', 'default' => 'yes', ] ); $this->add_control( 'mf_input_date_format_all', [ 'label' => esc_html__( 'Date format : ', 'metform' ), 'type' => Controls_Manager::SELECT, 'default' => 'm-d-Y', 'options' => [ 'Y-m-d' => esc_html__( 'YYYY-MM-DD', 'metform' ), 'd-m-Y' => esc_html__( 'DD-MM-YYYY', 'metform' ), 'm-d-Y' => esc_html__( 'MM-DD-YYYY', 'metform' ), 'Y.m.d' => esc_html__( 'YYYY.MM.DD', 'metform' ), 'd.m.Y' => esc_html__( 'DD.MM.YYYY', 'metform' ), 'm.d.Y' => esc_html__( 'MM.DD.YYYY', 'metform' ), ], 'conditions' => [ 'terms' => [ [ 'name' => 'mf_input_date_select', 'operator' => '=', 'value' => 'yes', ], [ 'name' => 'mf_input_month_select', 'operator' => '=', 'value' => 'yes', ], [ 'name' => 'mf_input_year_select', 'operator' => '=', 'value' => 'yes', ], ] ], ] ); $this->add_control( 'locale', [ 'label' => esc_html__( 'Localization', 'metform' ), 'description' => esc_html__( 'Language change will be shown on preview.', 'metform' ), 'type' => Controls_Manager::SELECT, 'options' => $this->get_locales(), 'default' => '', ] ); $this->add_control( 'mf_input_date_format_dm', [ 'label' => esc_html__( 'Date format : ', 'metform' ), 'type' => Controls_Manager::SELECT, 'default' => 'm-d', 'options' => [ 'm-d' => esc_html__( 'MM-DD', 'metform' ), 'd-m' => esc_html__( 'DD-MM', 'metform' ), 'm.d' => esc_html__( 'MM.DD', 'metform' ), 'd.m' => esc_html__( 'DD.MM', 'metform' ), ], 'conditions' => [ 'terms' => [ [ 'name' => 'mf_input_date_select', 'operator' => '=', 'value' => 'yes', ], [ 'name' => 'mf_input_month_select', 'operator' => '=', 'value' => 'yes', ], [ 'name' => 'mf_input_year_select', 'operator' => '!=', 'value' => 'yes', ], ] ], ] ); $this->add_control( 'mf_input_date_format_ym', [ 'label' => esc_html__( 'Date format : ', 'metform' ), 'type' => Controls_Manager::SELECT, 'default' => 'm-Y', 'options' => [ 'm-Y' => esc_html__( 'MM-YY', 'metform' ), 'Y-m' => esc_html__( 'YY-MM', 'metform' ), 'm.Y' => esc_html__( 'MM.YY', 'metform' ), 'Y.m' => esc_html__( 'YY.MM', 'metform' ), ], 'conditions' => [ 'terms' => [ [ 'name' => 'mf_input_date_select', 'operator' => '!=', 'value' => 'yes', ], [ 'name' => 'mf_input_month_select', 'operator' => '=', 'value' => 'yes', ], [ 'name' => 'mf_input_year_select', 'operator' => '=', 'value' => 'yes', ], ] ], ] ); $this->add_control( 'mf_input_date_format_yd', [ 'label' => esc_html__( 'Date format : ', 'metform' ), 'type' => Controls_Manager::SELECT, 'default' => 'd-Y', 'options' => [ 'd-Y' => esc_html__( 'DD-YY', 'metform' ), 'Y-d' => esc_html__( 'YY-DD', 'metform' ), 'd.Y' => esc_html__( 'DD.YY', 'metform' ), 'Y.d' => esc_html__( 'YY.DD', 'metform' ), ], 'conditions' => [ 'terms' => [ [ 'name' => 'mf_input_date_select', 'operator' => '=', 'value' => 'yes', ], [ 'name' => 'mf_input_month_select', 'operator' => '!=', 'value' => 'yes', ], [ 'name' => 'mf_input_year_select', 'operator' => '=', 'value' => 'yes', ], ] ], ] ); $this->add_control( 'mf_input_date_with_time', [ 'label' => esc_html__( 'Want to input time with it ?', 'metform' ), 'type' => Controls_Manager::SWITCHER, 'yes' => esc_html__( 'Yes', 'metform' ), '' => esc_html__( 'No', 'metform' ), 'return_value' => 'yes', 'default' => '', ] ); $this->add_control( 'mf_input_time_24h', [ 'label' => esc_html__( 'Enable time 24hr?', 'metform' ), 'type' => Controls_Manager::SWITCHER, 'yes' => esc_html__( 'Yes', 'metform' ), '' => esc_html__( 'No', 'metform' ), 'return_value' => 'yes', 'default' => '', 'condition' => [ 'mf_input_date_with_time' => 'yes' ] ] ); $this->input_get_params_controls(); $this->end_controls_section(); if(class_exists('\MetForm_Pro\Base\Package')){ $this->input_conditional_control(); } $this->start_controls_section( 'label_section', [ 'label' => esc_html__( 'Label', 'metform' ), 'tab' => Controls_Manager::TAB_STYLE, 'conditions' => [ 'relation' => 'or', 'terms' => [ [ 'name' => 'mf_input_label_status', 'operator' => '===', 'value' => 'yes', ], [ 'name' => 'mf_input_required', 'operator' => '===', 'value' => 'yes', ], ], ], ] ); $this->input_label_controls(); $this->end_controls_section(); $this->start_controls_section( 'input_section', [ 'label' => esc_html__( 'Input', 'metform' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->input_controls(); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'mf_date_calender_typography', 'label' => esc_html__( 'Calendar Typography', 'metform' ), 'global' => [ 'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_PRIMARY, ], 'selector' => '{{WRAPPER}} .mf-input-wrapper .flatpickr-calendar', 'exclude' => [ 'font_size', 'text_decoration', 'line_height', 'letter_spacing' ], ] ); $this->end_controls_section(); $this->start_controls_section( 'placeholder_section', [ 'label' => esc_html__( 'Place Holder', 'metform' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->input_place_holder_controls(); $this->end_controls_section(); $this->start_controls_section( 'help_text_section', [ 'label' => esc_html__( 'Help Text', 'metform' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'mf_input_help_text!' => '' ] ] ); $this->input_help_text_controls(); $this->end_controls_section(); $this->insert_pro_message(); } public function format_date($format, $array){ $response = []; foreach($array as $date){ $response[] = date($format, strtotime($date)); } return $response; } protected function render($instance = []){ $settings = $this->get_settings_for_display(); $inputWrapStart = $inputWrapEnd = ''; extract($settings); $render_on_editor = true; $is_edit_mode = 'metform-form' === get_post_type() && \Elementor\Plugin::$instance->editor->is_edit_mode(); /** * Loads the below markup on 'Editor' view, only when 'metform-form' post type */ if ( $is_edit_mode ): $inputWrapStart = '
'; endif; if(is_array($mf_input_disable_date_list)){ $disable_dates = []; foreach($mf_input_disable_date_list as $key => $value){ $disable_dates[] = $value['mf_input_disable_date']; } } $date_format = (isset($mf_input_date_format_all) ? $mf_input_date_format_all : (isset($mf_input_date_format_dm) ? $mf_input_date_format_dm : (isset($mf_input_date_format_yd) ? $mf_input_date_format_yd : (isset($mf_input_date_format_ym) ? $mf_input_date_format_ym : (($mf_input_year_select == 'yes') ? 'Y' : (($mf_input_month_select == 'yes') ? 'm' : (($mf_input_date_select == 'yes') ? 'd' : 'd-m-Y'))))))); if( esc_attr($mf_input_date_with_time) && !empty($mf_input_date_with_time) && empty($mf_input_time_24h)){ $date_format .= " h:i K"; }elseif(esc_attr($mf_input_date_with_time) && !empty($mf_input_date_with_time) && isset($mf_input_time_24h)){ $date_format .= " H:i"; } $class = (isset($settings['mf_conditional_logic_form_list']) ? 'mf-conditional-input' : ''); $configData = [ 'message' => $errorMessage = isset($mf_input_validation_warning_message) ? !empty($mf_input_validation_warning_message) ? $mf_input_validation_warning_message : esc_html__('This field is required.', 'metform') : esc_html__('This field is required.', 'metform'), 'required' => isset($mf_input_required) && $mf_input_required == 'yes' ? true : false, ]; $is_date_disabled = isset ( $disable_dates ) ? $this->format_date($date_format, $disable_dates) : []; $current_date_mode = $mf_input_range_date && $mf_input_range_date == 'yes' ? 'range' : 'single'; if ( 'yes' === $mf_input_date_with_time ) $mf_input_date_with_time = true; $minDate = ''; if( !empty( $mf_input_min_date_today ) ) { $minDate = $mf_input_min_date_today; } else { $minDate = $mf_input_min_date; } $dateConfig = [ 'minDate' => $minDate, 'maxDate' => $mf_input_max_date, 'dateFormat' => $date_format, 'enableTime' => $mf_input_date_with_time, 'disable' => $is_date_disabled, 'mode' => $current_date_mode, 'static' => true, 'disableMobile' => true, 'time_24hr' => (isset($mf_input_time_24h) && !empty($mf_input_time_24h)) ? true : false ]; if ( $locale ): wp_enqueue_script( 'flatpickr-' . $locale ); endif; ?>
<${props.Flatpickr} name="" className="mf-input mf-date-input mf-left-parent " placeholder="" options=${} value=${parent.getValue('')} onInput=${parent.handleDateTime} aria-invalid=${validation.errors[''] ? 'true' : 'false'} ref=${el => props.DateWidget( el, '', , register, parent )} /> <${validation.ErrorMessage} errors=${validation.errors} name="" as=${html``} /> %s ', esc_html( \MetForm\Utils\Util::react_entity_support(trim($mf_input_help_text), $render_on_editor))) : ''); ?>