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

[Author]

Posts

[adamG-6]

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?

[Nigel]

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.

[adamG-6]

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?

[adamG-6]

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);
}
}
});
});

[adamG-6]

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

[Nigel]

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.

[Nigel]

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.

[adamG-6]

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