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

Jazi · Accepted Answer · 2014-12-19 11:45:17Z

2

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);
    });
})

edited Dec 19, 2014 at 11:45

answered Dec 19, 2014 at 11:33

Jazi

6,76215 gold badges64 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arno Visser Over a year ago

Thanks for the answer Jazi. It worked for me only with double digits (days and month more than 9) but not with single digits. So 1 January 2023 gave a format error. To fix it I changed the var sDate to: var sDate = toDateValue.getFullYear() + '-' + ("0" + toDateValue.getMonth() + 1).slice(-2) + '-' + ("0" + toDateValue.getDate()).slice(-2); So forcing a double digit for months and days. Now it works fine.

user3459357 · Accepted Answer · 2014-12-19 11:49:13Z

1

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);
            }
        }
    });

answered Dec 19, 2014 at 11:49

user3459357

Comments

user4227915 · Accepted Answer · 2014-12-19 11:45:39Z

0

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);

    });

});

answered Dec 19, 2014 at 11:45

user4227915

Comments

Tegos · Accepted Answer · 2014-12-19 12:01:45Z

0

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

answered Dec 19, 2014 at 12:01

Tegos

4228 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related