We help IT Professionals succeed at work.

Datepicker set period after specified time

darren-w-
darren-w- asked
on
Medium Priority
908 Views
Last Modified: 2012-08-20
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
Comment
Watch Question

Jon NormanInformation Systems Manager
CERTIFIED EXPERT
Top Expert 2012
Commented:
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).
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

Author

Commented:
Now gone down another route,  so no longer relevant

Explore More ContentExplore courses, solutions, and other research materials related to this topic.