• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 856
  • Last Modified:

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
0
darren-w-
Asked:
darren-w-
  • 2
2 Solutions
 
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:
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
 
darren-w-Author Commented:
Now gone down another route,  so no longer relevant
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now