Set min-date for end date greater start-end selection

Ce fil est résolu. Voici une description du problème et la solution proposée.

Problem: I would like to set a minimum end date for my range datepicker based on the value selected for the start date. Users should not be able to select an end date before the start date.

Solution: Add some JavaScript that will set datepicker options using the 'onClose' datepicker option:

jQuery(document).ready(function () { 
var toolset_date_range_handler = function(date, datepicker) {
  jQuery('.js-wpv-date-front-end-event-end-date-and-time').datepicker('option', 'minDate', date);
};
jQuery('.js-wpv-date-front-end-event-start-date-and-time').datepicker('option', 'onClose', toolset_date_range_handler);
});

Relevant Documentation: http://api.jqueryui.com/datepicker/#option-onClose

This support ticket is created Il y a 6 années et 9 mois. 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Marqué : Custom search, Views, Views plugin

This topic contains 2 réponses, has 2 voix.

Last updated by Shreyas Khatri Il y a 6 années et 9 mois.

Assisted by: Christian Cox.

Auteur

Publications

juin 26, 2017 at 4:32 pm #541510

Shreyas Khatri

I am trying to: Set minDate for datepicker to a date greater than the date selected in Start Date field.

I visited this URL:
hidden link

It has two fields - Start Date (From) and End Date (To)

Currently, I am able to restrict both the dates to start from 'today' using the following JS

		jQuery(document).ready(function(){
			jQuery(".js-wpv-date-front-end-event-start-date-and-time").datepicker("option", "minDate", 0);
            jQuery(".js-wpv-date-front-end-event-end-date-and-time").datepicker("option", "minDate", 0);
		});

However, I want 'To' to start from date based on 'From' date selected by the user. I have tried adapting code from other similar tickets such as:
https://toolset.com/forums/topic/disable-certain-datepicker-dates-depended-on-another-datepicker-value/

but couldn't make it working.

Also,
This DOES NOT work
jQuery(".js-wpv-date-front-end-event-start-date-and-time").datepicker({ minDate: 0 });

This WORKS
jQuery(".js-wpv-date-front-end-event-start-date-and-time").datepicker("option", "minDate", 0);

Many thanks.

juin 27, 2017 at 2:44 pm #542024

Christian Cox

So I think the problem here is that you need to respond to the "onClose" event on the From datepicker. When that field is changed, then you need to trigger your datepicker minimum date code. Try adding the following JS:

jQuery(document).ready(function () { 
var toolset_date_range_handler = function(date, datepicker) {
  jQuery('.js-wpv-date-front-end-event-end-date-and-time').datepicker('option', 'minDate', date);
};
jQuery('.js-wpv-date-front-end-event-start-date-and-time').datepicker('option', 'onClose', toolset_date_range_handler);
});

juillet 2, 2017 at 5:36 pm #544006

Shreyas Khatri

Thanks Christian,

Your code worked like a charm!

Thanks a lot!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.