Datepicker set period after specified time

Hi,

Setting up a direct debit page, the user specifies the date for the first payment and then can pick on the end date for payments.

They need to pick on a defined period (ie monthly, weekly, 6 monthly...) and the end date cannot be before this.

so if a user picks a start date that is in 14 days+ time and the period is set to monthly the earliest end date cannot be before a month after the start date.

So the present code in snippets:

    jQuery("#start_date").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        beforeShowDay: jQuery.datepicker.noWeekends,
        minDate:14,
               onSelect: function( selectedDate ) {
            $( "#Enter_date" ).datepicker( "option", "minDate", selectedDate );
        }
    });
   
    jQuery("#Enter_date").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        beforeShowDay: jQuery.datepicker.noWeekends
 
    });

Open in new window


this is a function I'm using to work out the period as required by the datepicker:
function setDate(){
    var freq = jQuery('#frequency option:selected').attr('label');
    var twovalue;
    var retString;
    if(freq.indexOf(' ') >= 0){
        twovalue=  freq.split(' ');
    }
    if (freq.indexOf(' ') >= 0){
        twovalue=  freq.split(' ');
        var freqNo = twovalue[0];
        var freqPeriod = twovalue[1].charAt(0).toLowerCase();
        retString = "+"+freqNo+freqPeriod
    }else if(freq.toLowerCase() == "fortnight"){
        retString = "+2w";
    }else{
        retString = "+1"+ freq.charAt(0).toLowerCase();
    }
    jQuery("#Enter_date").datepicker("option","minDate",retString);
}

Open in new window


Though I think some native date manipulation may be required
LVL 13
darren-w-Asked:
Who is Participating?
 
darren-w-Author Commented:
Came up with this new version of the function

function setDate(){
    var startDate = $( "#start_date" ).datepicker( "getDate");
    var freq = jQuery('#frequency option:selected').attr('label');
    var twovalue;
    var freqNo;
    var freqPeriod;
    if (freq.indexOf(' ') >= 0){
        twovalue=  freq.split(' ');
        freqNo = twovalue[0];
        freqPeriod = twovalue[1].charAt(0).toLowerCase();        
        
    }else if(freq.toLowerCase() == "fortnight"){
        freqNo = 2;
        freqPeriod = 'w';       
    }else{
        freqNo = 1;
        freqPeriod = freq.charAt(0).toLowerCase();        
    }
    
    switch(freqPeriod) {
        case "w":
            startDate.setDate(startDate.getDate()+7*freqNo);
            break;
        case "m":
            startDate=new Date(startDate.setMonth(startDate.getMonth()+parseInt(freqNo)));
            break;
        case "d":
            startDate.setDate(startDate.getDate()+freqNo);
            break;
    }
    jQuery("#Enter_date").datepicker("option","minDate",startDate);
}

Open in new window


used with these methods:

 jQuery("#start_date").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        beforeShowDay: jQuery.datepicker.noWeekends,
        minDate:14,
        onSelect: function( ) {
            setDate()
        }
    });
   
    jQuery("#Enter_date").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        beforeShowDay: jQuery.datepicker.noWeekends
 
    });
    jQuery("#frequency").change(function(){
        setDate()
    })

Open in new window

0
 
JonNormanCommented:
I think you should be able to get it if you have the value of #start_date as a date:
var startDate=jQuery.datepicker.parseDate(jQuery("#start_date").datepicker("option","dateFormat"),jQuery("#start_date").val());

Open in new window

And the value of #Enter_date:
var enterDate=jQuery.datepicker.parseDate(jQuery("#Enter_date").datepicker("option","dateFormat"),jQuery("#Enter_date").val());

Open in new window

And the difference between the two in days:
Math.ceil((enterDate.getTime()-startDate.getTime())/(1000*60*60*24))

Open in new window

Then it's just a case of setting the change events on all the three fields (from recollection the change event is fired whether the datepicker is used or if the field is changed by typing).
0
 
darren-w-Author Commented:
Now gone down another route,  so no longer relevant
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.