The view uses AJAX. Each time a search is performed the search form will be updated, and we need to apply the code to it again. Let's extract the code that restricts the datepicker to a function:
function restrictDatePicker($) {
setTimeout(function() {
if(jQuery( "input.js-wpv-frontend-datepicker" )) {
let today = new Date();
let weekstart = new Date("2022-03-05"); // HIER AANPASSEN NAAR NIEUWE WEEK VAN DE HOOGBEGAAFDHEID
const diffTime = Math.abs(weekstart - today);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
const diffEndDate = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 8;
let mindate = "+" + diffDays + "D";
let maxdate = "+" + diffEndDate + "D";
jQuery("input.js-wpv-frontend-datepicker").each(function() {
val = $(this).val();
$(this).datepicker("option", "minDate", mindate);
$(this).datepicker("option", "maxDate", maxdate);
$(this).val(val);
});
}
}, 500 );
}
Then, we need to call this function on page load, and after each AJAX call. Check this article https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/
jQuery(document).ready(restrictDatePicker);
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.effect (string) The View AJAX pagination effect
* data.speed (integer) The View AJAX pagination speed in miliseconds
* data.layout (object) The jQuery object for the View layout wrapper
*/
restrictDatePicker(jQuery)
});
jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.view_changed_form (object) The jQuery object for the View form after being updated
* data.view_changed_form_additional_forms_only (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-form-view] shortcode
* data.view_changed_form_additional_forms_full (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-view] shortcode
*/
restrictDatePicker(jQuery)
});
This will fix the issues with the datepicker field. For the results filtering, it seems that the current query filter only looks for posts that have a start date greater than the search value. If we choose March 9th, it correctly returns March 13th post as it is greater than the search value.
The query filter needs to be updated to search for posts that have a start date lower than the search value, and an end date greater than the search value. In other words, the posts that are active for the search value. Two query filters like this hidden link
However, this query filters will not work on the events that have a begin and end date on the same day, because the posts' fields are datetimes, where as the search control is a date. This will not also for posts that have a begin date of the same day, because their begin date has a time and it is greater than 00:00:00 time which we are searching with.
To workaround this, I think that we can see if the start date is lower than the last second on the day of the search value. For that reason, we'll need custom code to hook into the view's query filter and change it. Something like this:
add_filter( 'wpv_filter_query', 'search_date_between_datetimes', 10, 3 );
function search_date_between_datetimes ( $query, $view_settings, $view_id ) {
if( $view_id == 13044 ) {
foreach( $query['meta_query'] as $key => $meta ){
if( isset( $meta['key'] ) && $meta['key'] == 'wpcf-datum-en-starttijd' ) {
// Add the last second of the day = (24 * 60 * 60) -1 = 86399
$query['meta_query'][$key]['value'] = 86399 + $query['meta_query'][$key]['value'];
}
}
}
return $query;
}
Read more about the filter here https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_query
It uses an underlying WP_Query instance, which you can check its arguments here https://developer.wordpress.org/reference/classes/wp_query/
I wanted to test this code on your website using a Toolset custom code snippet, but edit is deactivated on your website. Check this screenshot hidden link
I'll need FTP access if you want me check it for you. You can update your previous private reply with FTP credentials.
