how to set date to input field using another date input field?

Question

I have two input fields fromDate and toDate (both are date).I am using datepicker for input field fromDate. toDate is readonly and is dependent on the fromDate.That is date of toDate is is 6+.For example,if fromDate is 11/30/2014 then toDate is 12/6/2014.

My jsp code is

 <input type="text" class="form-control dpd1" id="fromDate" name="fromDate">
    <span class="input-group-addon">To</span>
     <input type="text" class="form-control dpd2" id="toDate" name="toDate" readonly/>

and js code is: $('.dpd1').datepicker();

Thanks

Answer 1

You can do this with jQuery and change(). In change, You can get the value of fromDate and with Date object create new value for the toDate input.

$(function() {
    $('#fromDate').change(function() {
        var fromDateValue = $(this).val();
        var toDateValue = new Date();

        // some operations

        $('#toDate').val(yourToDate);
    });
})

You can add 6 days with this:

var today = new Date();
var todayplus6days= new Date(today);
todayplus6days.setDate(today.getDate()+6);

UPDATE:

jsFiddle: http://jsfiddle.net/8dx0sLey/1/

$(function() {
    $('#fromDate').change(function() {
        var fromDateValue = $(this).val();
        var toDateValue = new Date(fromDateValue);

        toDateValue.setDate(toDateValue.getDate()+6);

        var sDate = toDateValue.getFullYear() + '-' + (toDateValue.getMonth()+1) + '-' + toDateValue.getDate();

        $('#toDate').val(sDate);
    });
})

Answer 2

I think you're looking for this.

 $("#from").datepicker({
        onClose: function (selectedDate, instance) {
            if (selectedDate != '') { //added this to fix the issue
                $("#to").datepicker("option", "minDate", selectedDate);
                var date = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
                date.setDate(date.getDate() + 6);
                console.log(selectedDate, date);
                $("#to").datepicker("option", "minDate", date);
            }
        }
    });

Answer 3

I tried using input type date:

---

http://jsfiddle.net/washington_guedes/dafbz0qo/

---

$(document).ready(function(){

    $("#fromDate").on("blur", function(){

        var year = parseInt( $(this).val().substring(0,4) );
        var month = parseInt( $(this).val().substring(5,7) );
        var day = parseInt( $(this).val().substring(9,11) );

        month += 6;
        if( month > 12){
            month %= 12;
            year++;
        }

        $("#toDate").val(year + "-" +
              ((month<10)?"0":"") + 
              month + "-" + 
              ((day<10)?"0":"") + day);

    });

});

Answer 4

Code:

$('#fromDate').datepicker();
$('#fromDate').change(function(){
    var toDate = new Date($(this).val());
    toDate.setDate(toDate.getDate()+6);
    month  = toDate.getMonth()+ 1;
    year = toDate.getFullYear();
    $('#toDate').val(month+'/'+toDate.getDate()+'/'+year );
});

Demo