[Resolved] Limiting datepicker year range

[Author]

Posts

[lesleeM]

Is there any way to change the year range in the datepicker? Our's is currently allowing users to choose years between 1582 and 3000. We don't need that many years in there. Ideally we'd like it to start with the current year at all times as the view we have set up has a conditional display to not show any results in the past. The page only shows future content. Even better would be to not allow users to choose ANY past dates, but we'd only want to do that if it is easy to set up. Otherwise having the year range start with the current year will be sufficient.

[Luo Yang]

Hello,

It needs custom JS codes, for example below similar thread:
https://toolset.com/forums/topic/how-to-restrict-date-picker-field-on-cred-form-with-year-range/#post-2071119
You can get current year value with below JS codes:

var currentYear = new Date().getFullYear();

Please let me know if you need assistance for it.

More help:
hidden link
hidden link

[lesleeM]

I'm not sure what I need to change in the code from Minesh there to make it work with our field. Our filter where the year selector is showing is coded as follows:

<div class="form-group">
<label for="wpv-wpcf-start-date-and-time_min">[wpml-string context="wpv-views"]Start Date Range[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-start-date-and-time" url_param="wpv-wpcf-start-date-and-time_min"]
</div>
<div class="form-group">
<label for="wpv-wpcf-start-date-and-time_max">[wpml-string context="wpv-views"]End Date Range[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-start-date-and-time" url_param="wpv-wpcf-start-date-and-time_max"]
</div>

But I'm not sure what I need to change in the code to make it work with these.

[Luo Yang]

I assume we are talking about custom search form, you can try below JS codes:

jQuery( document ).ready(function() {
	jQuery( 'input.js-wpv-date-front-end-wpv-wpcf-start-date-and-time_min' ).datepicker( "option", "minDate", "+0d");
	jQuery( 'input.js-wpv-date-front-end-wpv-wpcf-start-date-and-time_max' ).datepicker("option", "minDate", "+0d");
});

See below test site:
Login URL: hidden link

View URL:
hidden link
In section "Search and Pagination", click "JS editor", add the JS codes I mentioned above

Result page:
hidden link

More help:
hidden link

[lesleeM]

Excellent!!! I had to modify the code you provided as follows:

jQuery( document ).ready(function() {
jQuery( 'input.js-wpv-date-front-end-wpv-wpcf-start-date-and-time_min' ).datepicker( "option", "minDate", "+0d");
jQuery( 'input.js-wpv-date-front-end-wpv-wpcf-start-date-and-time_max' ).datepicker("option", "minDate", "+0d");
jQuery( 'input.js-wpv-date-front-end-wpv-wpcf-start-date-and-time_min' ).datepicker( "option", "maxDate", "+365d");
jQuery( 'input.js-wpv-date-front-end-wpv-wpcf-start-date-and-time_max' ).datepicker("option", "maxDate", "+365d");
});

This way we give people the ability to choose a range starting with NOW and going out for 1 year. That is much nicer. The default year range of 1582 to 3000 was kind of silly. 😉

[lesleeM]

My issue is resolved now. Thank you!

All good with this one.