Skip Navigation

[Resolved] Frontend filtering for Event – filter each day based on CPF Datetime

This thread is resolved. Here is a description of the problem and solution.

Problem:
The user has some post with a start and end datetime, on the same day, and he would like to filter the view by dates.

Solution:
The filter shortcode can take a values and dispaly_values arguments. Then we'll need custom code hook into the view and change its query filter.

[wpv-control-postmeta values=",23/07/2021,24/07/2021,25/07/2021" display_values="Every day,Friday 23.07.2021,Saturday 24.07.2021,Sunday 25.07.2021" field="wpcf-screening-date" type="select" source="custom" url_param="wpv-day"]>
add_filter( 'wpv_filter_query', 'default_this_month_inclusive', 10, 3 );
function default_this_month_inclusive ( $query, $view_settings, $view_id ) {
  if( $view_id == 1784 ) {
    $selected_start = 0; // strtotime('0:00:00');
    $selected_end = 9999999999;
 
    // determine if user has selected a start or end date, and destroy those meta query items
    if ( isset($query['meta_query']) ) {
      foreach($query['meta_query'] as $key => $meta) {
        if(isset($meta['key']) && $meta['key'] == 'wpcf-screening-date'){
          // get a timestamp that represents 12:00 am on the event start date
          $selected_start = strtotime(date($meta['value']) . ' 0:00:00');
          unset($query['meta_query'][$key]);
        }
        if(isset($meta['key']) && $meta['key'] == 'wpcf-screening-date'){
          // get a timestamp that represents 11:59:59 pm on the event end date
          $selected_end = strtotime(date($meta['value']) . ' 23:59:59');
          unset($query['meta_query'][$key]);
        }
      }
    }
 
    $args = array(
      'relation' => 'AND',
      array(
        'key' => 'wpcf-screening-date',
        'value' => $selected_end,
        'compare' => '<=',
        'type' => 'numeric'
      ),
      array(
        'key' => 'wpcf-screening-date',
        'value' => $selected_start,
        'compare' => '>=',
        'type' => 'numeric'
      )
    );
    // add these arguments to your meta query
    $query['meta_query'] = isset($query['meta_query']) ? $query['meta_query'] : [];
    $query['meta_query'][] = $args;
  }
  return $query;
}

Relevant Documentation:

This support ticket is created 4 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 - - 9:00 – 13:00
14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 - - 14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

This topic contains 4 replies, has 2 voices.

Last updated by davidH-33 4 years ago.

Assisted by: Jamal.

Author
Posts
#1859587

Tell us what you are trying to do?
I'm preparing festival website with the screening listing based on the screening date of each film (Toolset custom post type slug: screening, CPF slug: screening-date, format: date and time) and I need to figure out how to create frontend filter that can filter each day of festival (and all days as a default value). I prefer some dropdown menu filter or alternatively maybe some horizontal aligned buttons for each day. Using datepicker or input field isn't user friendly and I can't use classic frontend filter also due to the date and time format. Could you please help me to figure out how to implement the day filters?

Is there any documentation that you are following?
I was searching for some solution on but din't find any way ho to create the filter.

Is there a similar example that we can see?
Yes, I'm re-creating the website with the same feature/filter that has been created in Umbraco.

What is the link to your site?
Please see my listing that has been prepared in Views and embedded into Elementor Pro page:
hidden link

This is the web page that already contains the day filtering (we need to move the content from this Umbraco website to new.lfs.cz WordPress website):
hidden link

#1859897

Hello and thank you for contacting the Toolset support.

This can be done but will need custom code. Note, that dates or dates&times are stored as timestamps(numbers) in Toolset. You will need to hook into the view's query and compare them as signed numbers. A timestamp is the number of second since the epoche

First, You can implement a dropdown with custom values(corresponding to the festival days) using the values and display_values attributes of the wpv-control-postmeta shortcode.

[wpv-control-postmeta values=",07/08/2020,08/08/2020" display_values="Every day,Friday 07.08.2020,Saturday 08.08.2020" field="wpcf-your-date-field" type="select" source="custom" url_param="wpv-day"]

Notice how I started with a comma(,) in the "values" attribute. It correspond to no day filter entered. Read more about the options of the shortcode here https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-520693

Then, you will need custom PHP code to hook into the view's query and customize the meta_query to search between the start of the day and the end of it.

Check an example of custom code that is somehow similar to your case, except that it uses two custom fields, where you should use only one custom field and compare it with two values(beginning of the day, and end of the day)
hidden link

I hope this helps. Let me know if you have any questions.

#1860049

Thank you. The dropdown has been implemented and the php code has been added too but unfortunately it's not working yet. Could you please check what should be wrong?
This is my dropdown code:

[wpv-control-postmeta values=",23/07/2021,24/07/2021,25/07/2021" display_values="Every day,Friday 23.07.2021,Saturday 24.07.2021,Sunday 25.07.2021" field="wpcf-screening-date" type="select" source="custom" url_param="wpv-day"]>

.
And this is my PHP code that has been added by me:

add_filter( 'wpv_filter_query', 'default_this_month_inclusive', 10, 3 );
function default_this_month_inclusive ( $query, $view_settings, $view_id ) {
  if( $view_id == 413 ) {
    $selected_start = strtotime('0:00:00');
    $selected_end = 9999999999;

    // determine if user has selected a start or end date, and destroy those meta query items
    if ( isset($query['meta_query']) ) {
      foreach($query['meta_query'] as $key => $meta) {
        if(isset($meta['key']) && $meta['key'] == 'wpcf-screening-date'){
          // get a timestamp that represents 12:00 am on the event start date
          $selected_start = strtotime(date('d/m/Y', $meta['value']) . ' 0:00:00');
          unset($query['meta_query'][$key]);
        }
        if(isset($meta['key']) && $meta['key'] == 'wpcf-screening-date'){
          // get a timestamp that represents 11:59:59 pm on the event end date
          $selected_end = strtotime(date('d/m/Y', $meta['value']) . ' 23:59:59');
          unset($query['meta_query'][$key]);
        }
      }
    }

    $args = array(
      'relation' => 'AND',
      array(
        'key' => 'wpcf-screening-date',
        'value' => $selected_end,
        'compare' => '<=',
        'type' => 'numeric'
      ),
      array(
        'key' => 'wpcf-screening-date',
        'value' => $selected_start,
        'compare' => '>=',
        'type' => 'numeric'
      )
    );
    // add these arguments to your meta query
    $query['meta_query'] = isset($query['meta_query']) ? $query['meta_query'] : [];
    $query['meta_query'][] = $args;
  }
  return $query;
}

If you prefer to log in to WordPress I can provide you admin login details.
Thank you.

#1861575

I run a test locally and I was able to get the expected results with the following code:

add_filter( 'wpv_filter_query', 'default_this_month_inclusive', 10, 3 );
function default_this_month_inclusive ( $query, $view_settings, $view_id ) {
  if( $view_id == 1784 ) {
    $selected_start = 0; // strtotime('0:00:00');
    $selected_end = 9999999999;

    // determine if user has selected a start or end date, and destroy those meta query items
    if ( isset($query['meta_query']) ) {
      foreach($query['meta_query'] as $key => $meta) {
        if(isset($meta['key']) && $meta['key'] == 'wpcf-screening-date'){
          // get a timestamp that represents 12:00 am on the event start date
          $selected_start = strtotime(date($meta['value']) . ' 0:00:00');
          unset($query['meta_query'][$key]);
        }
        if(isset($meta['key']) && $meta['key'] == 'wpcf-screening-date'){
          // get a timestamp that represents 11:59:59 pm on the event end date
          $selected_end = strtotime(date($meta['value']) . ' 23:59:59');
          unset($query['meta_query'][$key]);
        }
      }
    }

    $args = array(
      'relation' => 'AND',
      array(
        'key' => 'wpcf-screening-date',
        'value' => $selected_end,
        'compare' => '<=',
        'type' => 'numeric'
      ),
      array(
        'key' => 'wpcf-screening-date',
        'value' => $selected_start,
        'compare' => '>=',
        'type' => 'numeric'
      )
    );
    // add these arguments to your meta query
    $query['meta_query'] = isset($query['meta_query']) ? $query['meta_query'] : [];
    $query['meta_query'][] = $args;
  }
  return $query;
}

And I used the format d/m/Y for my filter values=",11/29/2020,11/30/2020":

[wpv-control-postmeta  type="select" source="custom" values=",11/29/2020,11/30/2020" display_values="Every day,11/29/2020,11/30/2020" field="wpcf-screening-date" url_param="wpv-wpcf-screening-date"]

I changed the following in your previous code:
- View ID, as I have a different ID for my view.
- $selected_start = 0; in line 4, so we can get all the post when the filter does not have a value.
- The first argument to date() function in lines 12 and 17

I hope this helps. Otherwise, I set your next reply to be private to check the view closely. ** Make a database backup before sharing credentials. **

#1861643

The day filter now works fine. Thank you for the support.