Skip Navigation

[Resolved] Post date and close date – limit range to 28 days

This support ticket is created 5 years, 9 months 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
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 7 replies, has 2 voices.

Last updated by adamG-6 5 years, 9 months ago.

Assisted by: Nigel.

Author
Posts
#1208986

I have a custom post field called "job-post-date" - I am able to limit this to a date from today to 28 days time using

jQuery(window).bind("load", function() {
jQuery('[id^="cred_form_245_1-textfield"]').datepicker('option',{minDate: 0,maxDate: 28});
});

I have a second custom post field called "job-close-date" - I would like to limit this from the selected "job-post-date" to 28 days from this date - how can I do this?

#1209328

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Adam

Sorry, the forum is too busy at the moment for us to provide custom code, but let me explain the basics of what's required and hopefully you can get it working.

Right now you have code that on page load updates the options of the datepicker object attached to the particular form field.

What you need to do is listen to a change event on that same field so that when the field is updated you can then take the value from that field as a variable and use it to effectively do the same thing again, only this time you will be updating the options of the datepicker attached to the second field using that variable (instead of the hardcoded 0 and 28 values).

I would structure your code something like this (the way we use the DOM ready event below allows us to use the familiar $ for jQuery):

( function( $ ) {
	$( document ).ready( function(){

		// update options of first field
		$('[id^="cred_form_245_1-textfield"]').datepicker('option',{minDate: 0,maxDate: 28});

		// listen for changes in first field
		$('[id^="cred_form_245_1-textfield"]').on( "change", function(event){

			// take the value of this first field


			// update the options of the second field using it

		
		});	

	});
})( jQuery );

If you get stuck I might be able to help you later in the week if the support queue is quiet.

#1209726

I managed to find a js script that works for:

HTML:

<input type="text" id="dt1">
<input type="text" id="dt2">

JS:

$(document).ready(function () {

$('#dt1').datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
maxDate: 28,
onSelect: function (date) {
var date2 = $('#dt1').datepicker('getDate');
date2.setDate(date2.getDate() + 28);
$('#dt2').datepicker('setDate', date2);
//sets maxDate to dt1 date + 28
$('#dt2').datepicker('option', 'maxDate', date2);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#dt1').datepicker('getDate');
console.log(dt1);
var dt2 = $('#dt2').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = $('#dt2').datepicker('option', 'minDate');
$('#dt2').datepicker('setDate', minDate);
}
}
});
});

However when trying to implement this for the cred fields they are not static IDs so it doesn't work - is there a way of determining what the ID would be or in the above script or forcing the IDs to be static?

#1209754

SOLUTION:

$(document).ready(function () {

$('[id^=cred_form_245_1-textfield-2]').datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('[id^=cred_form_245_1-textfield-2]').datepicker('getDate');
date2.setDate(date2.getDate() + 28);
$('[id^=cred_form_245_1-textfield-3]').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
$('[id^=cred_form_245_1-textfield-3]').datepicker('option', 'maxDate', date2);
}
});
$('[id^=cred_form_245_1-textfield-3]').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('[id^=cred_form_245_1-textfield-2]').datepicker('getDate');
console.log(dt1);
var dt2 = $('[id^=cred_form_245_1-textfield-3]').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = $('[id^=cred_form_245_1-textfield-3]').datepicker('option', 'minDate');
$('[id^=cred_form_245_1-textfield-3]').datepicker('setDate', minDate);
}
}
});
});

#1209760

Close but not quite - the above allows me to set limites but the values are not stored when hitting submit.

#1210090

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Adam

I took what I thought was going to be a quick look at this to see if I could point you to the solution, but in my tests I was unable to get any code to work to update the datepicker options.

I'm sure I have been able to before, and if I search in the forums I can see lots of examples of the same, and while I can get it to work if I enter manually code directly in the browser console, I cannot get it to work when adding custom JS to the form.

Fearing for my sanity I checked with colleagues who also ran into the same problem.

So I've asked my colleagues in second tier to take a closer look to see if they can spot the problem.

I'll let you know what they find.

#1210475

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Adam

OK, looking at this again with a clear head this morning and after confirming with colleagues which is the right event to use to trigger the code, I set up a sample site and got it working with the following code:

jQuery(window).bind("cred_form_ready", function() {
  
	var ts_date_handler = function( dateIsEmpty, datepickerObj ){

		var selected = datepickerObj.selectedYear + "/" + (datepickerObj.selectedMonth + 1) + "/" + datepickerObj.selectedDay;

		var selectedDate = new Date( selected );

		var limitDate = new Date();

		limitDate.setDate(selectedDate.getDate() + 28);

		$('input[name="wpcf-end[display-only]"]').datepicker('option', {minDate: selectedDate, maxDate: limitDate });

	}

	$('input[name="wpcf-start[display-only]"]').datepicker('option', {minDate: 0,maxDate: 28, onClose: ts_date_handler } );
  
});

Note you need to make two edits, for the names of the start and end date fields.

Types fields have a 'wpcf-' prefix, so in the above code my start and end fields are 'wpcf-start' and 'wpcf-end'.

Let me know how you get on.

#1211137

Thank you Nigel - this works perfectly - As always from the Toolset team - great service.