asked on

jQuery Datepicker: Need to add days to selected date.

Hi,

I'm using the Datepicker jQuery plugin (http://keith-wood.name/datepick.html) to allow customers to select 2 dates.

The first date can be any date, but the second date must be on or after the first date, and no more than 30 days in the future.

Shown below is what I have so far. It's more-or-less taken from the datepicker docs, and works. It only allows future dates to be selected in the second date field (#ph_complete), but what I need to do now is add the 30 day max difference bit. Any ideas?

I've tried dateAdd on the jQuery date object that datepicker returns but that doesnt work, it just brakes the script.
The commented line adds 20 days to the current date NOW not the selected date, so that didn't work :(

$('#ph_order, #ph_complete').datepick({
	showOtherMonths: true,
	dateFormat: 'd MM yy',
	beforeShow: customRules
});
 
function customRules(input) {
	return {
		minDate: (input.id == 'ph_complete' ? $('#ph_order').datepick('getDate') : null),
		maxDate: (input.id == 'ph_order' ? $('#ph_complete').datepick('getDate') : null)
		//maxDate: (input.id == 'ph_order' ? $('#ph_complete').datepick('getDate') : +30)
	};
}

Open in new window

amit_g

Have you tried?

maxDate: (input.id == 'ph_order' ? $('#ph_complete').datepick('getDate') + 30 : null)

MereDevelopment

ASKER

Hi,

just tried that, but no it doesn't seem to work, and looking at it, if it did work it'd set the maxdate on the #ph_order field which isn't quite right.

I think the key is finding out how to add days to a datepick object.

For a test I tried the code below hoping that it would alert the picked date +30 days but no luck either, it just shows the date and adds "30" as a string to the end.

Any other ideas? Thanks...

$('#ph_order, #ph_complete').datepick({
        showOtherMonths: true,
        dateFormat: 'd MM yy',
        //beforeShow: customRules
        onClose: customRules
});
 
function customRules(input) {
        alert($('#ph_order').datepick('getDate')+30);
}

Open in new window

amit_g

Use the code given below. I am not sure what date should be used to add but that should be simple to change/

function customRules(input) {
	var MinDate = (input.id == 'ph_complete' ? new Date($('#ph_order').datepick('getDate')) : null);
	var MaxDate = new Date();
 
	MaxDate.setDate(MinDate.getDate() + 30);
	
        return {
                minDate: MinDate,
                maxDate: MaxDate
        };
}

Open in new window

MereDevelopment

ASKER

Ok thanks for that, but I'm not getting very far with that. Not sure what you meant by " ".

I've made a horrible looking function below that almost works. If you select a start date then the end date can only be between the start and start+30, if if you then select the end date, and start again, it then allows a range of 60 days, then 90, etc etc etc.

*pulling hair out*

function customRules(input) {
	if (input.id == "ph_complete") {
		MinDate = $('#ph_order').datepick('getDate');
		if (MinDate) {
			var MaxDate = new Date();
			MaxDate.setDate(MinDate.getDate() + 30);
		} else {
			MinDate = null;
			MaxDate = null;
		}
	} else {
		MaxDate = $('#ph_complete').datepick('getDate');
		if (MaxDate) {
			var MinDate = new Date(); //alert(MinDate);
			MinDate.setDate(MaxDate.getDate() - 30);
		} else {
			MinDate = null;
			MaxDate = null;
		}
	}
	alert("minDate: "+MinDate+"\nmaxDate: "+MaxDate);
	return {
		minDate: MinDate,
		maxDate: MaxDate
	};
}

Open in new window

ASKER CERTIFIED SOLUTION

amit_g

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

MereDevelopment

ASKER

Aha! you rock... thanks a lot, that works. I'm glad you understand JS and JQ date objects much better than I do!