Limiting date filter year

[David Cranley]

Hi Ernest,

I need to limit the date range of the filters. I am using custom field ones, in case that matters. In this use case, the oldest publication was published in 2016, so people shouldn’t be able to select any year before that. They also shouldn’t be able to select a year later than the current year.

I’m seeing the same in your events demo (being able to select years 2013-2033). Would it not provide a better user experience to have the year limited to when there are events available?

I cannot find a setting for this on the backend, or anything in the docs. FYI when I tried to use forum search, nothing happened when I pressed enter or clicked the search icon after entering my query.

Thank you in advance for your help.

[Ernest Marcinko]

Hi,

Well, that can’t be adjusted on the back-end, but it can be programmatically via a custom code snippet:

add_action('wp_footer', 'wp_footer_datepicker_range_fix', 9999);
function wp_footer_datepicker_range_fix() {
	?>
	<script>
	(function($){
		setTimeout(function(){
			$('.asp_w .hasDatepicker').datepicker('option', 'yearRange', '-9:+1')
		}, 500);
	})(jQuery);
	</script>
	<?php
}

This snippet above will adjust the year range from -9 to +1 years, meaning 2016 to 2026. You can change that on the 6th line as you need it.

[David Cranley]

Hi Ernest,

Thank you for this. It seems like this function only works on desktop, and not on mobile, is that correct? I did test on mobile in incognito and on several devices. If we can find a solution that works on both that’d be preferred.

[Ernest Marcinko]

You are welcome!

I suspect it’s because on mobile it needs to be opened and the loading is delayed so the code does nothing. I think it’s still doable with a few changes:

add_action(
	'wp_footer',
	function () {
		?>
		<script>
			window.addEventListener("load", () => {
				const loadYears = ()=> {
					setTimeout(function(){
						$('.asp_w .hasDatepicker').datepicker('option', 'yearRange', '-9:+1')
					}, 500);
				};
				document.querySelectorAll(".asp_main_container").forEach((el) => {
					el.addEventListener("asp_settings_show", (event) => {
						loadYears();
					});
				});
				loadYears();
			});
		</script>
		<?php
	}
);

[David Cranley]

Thank you Ernest, but unfortunately, the problem remains the same. Does this mean it is not possible at this stage?

[Ernest Marcinko]

It’s definitely possible to resolve, I think I just made a mistake in the code, please try this one instead:

add_action(
	'wp_footer',
	function () {
		?>
		<script>
			window.addEventListener("load", () => {
				const loadYears = ()=> {
					setTimeout(function(){
						jQuery('.asp_w .hasDatepicker').datepicker('option', 'yearRange', '-9:+1')
					}, 500);
				};
				document.querySelectorAll(".asp_main_container").forEach((el) => {
					el.addEventListener("asp_settings_show", (event) => {
						loadYears();
					});
				});
				loadYears();
			});
		</script>
		<?php
	}
);

I used a jQuery shorthand $ in the previous code which didn’t work. This should be the one.

[David Cranley]

Thank you very much Ernest, that fixed it.

[Ernest Marcinko]

You cannot access this content.

[Author]

Posts