Create a custom input field

You can add your own custom field types to GD and have then output as you wish.  The below example adds a "date range" input field.

Add the field to the custom field settings

The below code will add the field to the custom field settings so that you can add it to your add listing page.  The "field_type" is the custom key that we will use for other hooks, in this case it is: daterange

add_filter('geodir_custom_fields_custom','_my_gd_custom_field_date_range',10,2);
function _my_gd_custom_field_date_range($custom_fields, $post_type ){
	
	// Date range
	$custom_fields['date_range'] = array( // The key value should be unique and not contain any spaces.
		'field_type'  => 'daterange', // this is our new field type
		'class'       => 'gd-date-range',
		'icon'        => 'fas fa-calendar-alt',
		'name'        => __( 'Date Range', 'geodirectory' ),
		'description' => __( 'Adds a date range input', 'geodirectory' ),
		'defaults'    => array(
			'data_type'          => 'TEXT',
			'admin_title'        => 'Date range',
			'frontend_title'     => 'Dates',
			'frontend_desc'      => 'Enter the start and end dates.',
			'htmlvar_name'       => 'date_range',
			'is_active'          => true,
			'for_admin_use'      => false,
			'default_value'      => '',
			'show_in'            => '[detail]',
			'is_required'        => false,
			'option_values'      => '',
			'validation_pattern' => '',
			'validation_msg'     => '',
			'required_msg'       => '',
			'field_icon'         => 'fas fa-calendar-alt',
			'css_class'          => '',
			'cat_sort'           => false,
			'cat_filter'         => false,
				
		)
	);
	
	return $custom_fields;
}

It will then show in your Places > Settings > Custom Fields settings.

Add the field input code

For it to appear in the add listing page we need to tell the system what type of input we should show, if we simply wanted a text input we could add a single line such as:  add_filter('geodir_custom_field_input_daterange','geodir_cfi_text',10,2);  
The Standard GD input function "geodir_cfi_text" would deal with the type of input, you can find all the default input types in this file: https://github.com/AyeCode/geodirectory/blob/master/includes/custom-fields/input-functions-aui.php

In our case we want to setup a new type of input that includes a date range, we can save some time by copying the geodir_cfi_datepicker function and renaming it.

add_filter('geodir_custom_field_input_daterange','_my_geodir_cfi_daterange',10,2);


/**
 * Get the html input for the custom field: daterange
 *
 * @param string $html The html to be filtered.
 * @param array $cf The custom field array details.
 * @since 1.6.6
 *
 * @return string The html to output for the custom field.
 */
function _my_geodir_cfi_daterange($html,$cf){


    $html_var = $cf['htmlvar_name'];


    // Check if there is a custom field specific filter.
    if(has_filter("geodir_custom_field_input_datepicker_{$html_var}")){
        /**
         * Filter the datepicker html by individual custom field.
         *
         * @param string $html The html to filter.
         * @param array $cf The custom field array.
         * @since 1.6.6
         */
        $html = apply_filters("geodir_custom_field_input_datepicker_{$html_var}",$html,$cf);
    }


    // If no html then we run the standard output.
    if(empty($html)) {
        global $geodir_label_type;


        $extra_attributes = array();
        $title = '';
        $value = geodir_get_cf_value($cf);


        $name = $cf['name'];
        $extra_fields = ! empty( $cf['extra_fields'] ) ? maybe_unserialize( $cf['extra_fields'] ) : NULL;
        $date_format = ! empty( $extra_fields['date_format'] ) ? $extra_fields['date_format'] : 'yy-mm-dd';
        $jquery_date_format = $date_format;


        // Check if we need to change the format or not
        $date_format_len = strlen( str_replace( ' ', '', $date_format ) );


        // If greater then 5 then it's the old style format.
        if ( $date_format_len > 5 ) {
            $search = array( 'dd', 'd', 'DD', 'mm', 'm', 'MM', 'yy' ); // jQuery UI datepicker format.
            $replace = array( 'd', 'j', 'l', 'm', 'n', 'F', 'Y' ); // PHP date format


            $date_format = str_replace( $search, $replace, $date_format );
        } else {
            $jquery_date_format = geodir_date_format_php_to_aui( $jquery_date_format );
        }


        if ( $value == '0000-00-00' ) {
            $value = ''; // If date not set, then mark it empty.
        }


        //validation
        if(isset($cf['validation_pattern']) && $cf['validation_pattern']){
            $extra_attributes['pattern'] = $cf['validation_pattern'];
        }


        // validation message
        if(isset($cf['validation_msg']) && $cf['validation_msg']){
            $title = $cf['validation_msg'];
        }


        // field type (used for validation)
        $extra_attributes['field_type'] = $cf['type'];


        // flatpickr attributes
        $extra_attributes['data-alt-input'] = 'true';
        $extra_attributes['data-alt-format'] = $date_format;
        $extra_attributes['data-date-format'] = 'Y-m-d';
        $extra_attributes['data-mode'] = 'range';


        // minDate / maxDate
        if ( ! empty( $extra_fields['date_range'] ) ) {
            $year_range = geodir_input_parse_year_range( $extra_fields['date_range'] );


            // minDate
            if ( ! empty( $year_range['min_year'] ) ) {
                $extra_attributes['data-min-date'] = $year_range['min_year'] . '-01-01';
            }


            // maxDate
            if ( ! empty( $year_range['max_year'] ) ) {
                $extra_attributes['data-max-date'] = $year_range['max_year'] . '-12-31';
            }
        }


        /**
         * Filter datepicker field extra attributes.
         *
         * @since 2.1.1.11
         *
         * @param array $extra_attributes Field attributes.
         * @param array $cf The custom field array.
         */
        $extra_attributes = apply_filters( 'geodir_cfi_daterange_extra_attrs', $extra_attributes, $cf );


        // required
        $required = !empty($cf['is_required']) ? ' <span class="text-danger">*</span>' : '';


        // admin only
        $admin_only = geodir_cfi_admin_only($cf);


        $conditional_attrs = geodir_conditional_field_attrs( $cf );


        $html = aui()->input(
            array(
                'id'                => $cf['name'],
                'name'              => $cf['name'],
                'required'          => !empty($cf['is_required']) ? true : false,
                'label'              => __($cf['frontend_title'], 'geodirectory').$admin_only . $required,
                'label_show'       => true,
                'label_type'       => !empty($geodir_label_type) ? $geodir_label_type : 'horizontal',
                'type'              => 'datepicker',
                'title'             =>  $title,
                'placeholder'       => esc_html__( $cf['placeholder_value'], 'geodirectory'),
                'class'             => '',
                'value'             => $value, // esc_attr(stripslashes($value))
                'help_text'         => __($cf['desc'], 'geodirectory'),
                'extra_attributes'  => $extra_attributes,
                'wrap_attributes'   => $conditional_attrs
            )
        );


    }


    return $html;
}

This will then show on the add listing page.

Output the custom field value

Lastly, we need to tell it how it should be output, in this case we can use a default field such as a text field output.

add_filter('geodir_custom_field_output_daterange','geodir_cf_text',10,5);

The default GD function "geodir_cf_text" will output the value as simple text.  If we wanted it to output something more than simple text or in a different format we could add a custom function.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us