Question

I’ve got three inputs:

<input type='number'>
<input class='datepicker'>
<input class='datepicker' readonly='readonly'>

The datepicker is simple, as that:

<script>
  $(function() 
    {
     $('.datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
    }); 
</script>

The first is for setting number of weeks, for example 2. The second is for setting the start date. How can I make that in the third input (which is readonly) will be output of the result date of the date that has been set plus number of weeks?

Like when I set 2 weeks and then use the first datepicker to set 2012-12-07, then it will output into third (readonly) input 2012-12-21 ?

Thanks in advice!

Answer 1

You need to use the property onSelect() of the datepicker to retrieve the chosen date and update the read-only field : http://api.jqueryui.com/datepicker/#option-onSelect

Then you need to use the Date object and its methods to parse the chosen date, add a specific number of days to it and return a new text corresponding to the new date.

<input id="nbweeks" type='number' />
<input class='datepicker' />
<input id="input-ro" class='datepicker' readonly='readonly' />

function addDaysDate(dateText, days) {
    var curDate = new Date(Date.parse(dateText));
    var nextDate = new Date();
    nextDate .setDate(curDate.getDate() + days);

    var curDay = nextDate .getDate();
    var curMonth = nextDate .getMonth() + 1; //Months are zero based
    var curYear = nextDate .getFullYear();
    return curMonth + "-" + curDay + "-" + curYear;​
}

$(function(){
    $('.datepicker').datepicker({
        dateFormat: 'yyyy-mm-dd',
        onSelect(dateText, inst) {
            var days = $("#nbweeks").val() * 7;
            var newDate = addDaysDate(dateText, days)
            $("#input-ro").val(newDate)​;​
        }
    });
});

Live example of the code (without the datepicker) : http://jsfiddle.net/PcTHQ/

EDIT : Be careful, for the Date.parse() to work I think you need to have the years on four digits or change the order of your date to mm/dd/yy maybe