2016-07-27 8 views
0

Ich habe zwei datepciker Textbox jetzt was ich will, wenn ich ein beliebiges Datum vom ersten Datepicker auswählen, im zweiten Datepicker + 7 Tag automatisch ausgewählt.möchten +7 Datum des ausgewählten Datums abrufen

z. ausgewähltes Datum in erster Datumsauswahl: 27-07-2016 zweite Datumsauswahl sollte es automatisch sein: 03-08-2016

$(function() { 
 
    $("#txtstart_date").datepicker(); 
 
}); 
 
$("#txtstart_date").change(function() { 
 
    crnt = toDate($("#txtstart_date").val()); 
 
    var nextWeekday = addDays(crnt, 7); 
 
    alert("nextday : " + nextWeekday); 
 
}); 
 

 
function addDays(dateObj, numDays) { 
 
    dateObj.setDate(dateObj.getDate() + numDays); 
 
    return dateObj; 
 
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<div class="formelementblock"> 
 
    <div class="formelement"> 
 
    <input type="text" name="txtstart_date" class="input-text datepickerwidth required" id="txtstart_date" placeholder="Start Date*" /> 
 
    </div> 
 

 
</div> 
 
<div class="formelementblock last"> 
 
    <div class="formelement"> 
 
    <input type="text" name="txtend_date" class="input-text datepickerwidth required" id="txtend_date" placeholder="End Date*" /> 
 
    </div> 
 
</div>

Antwort

2

$(function() { 
 
    $("#txtstart_date").datepicker(); 
 
}); 
 
$("#txtstart_date").change(function() { 
 
    crnt = new Date($("#txtstart_date").val()); 
 
    var nextWeekday = addDays(crnt, 7); 
 
    alert("nextday : " + nextWeekday); 
 
    var end = $.datepicker.formatDate('mm/dd/yy', nextWeekday); 
 
    $("#txtend_date").val(end); 
 
}); 
 

 
function addDays(dateObj, numDays) { 
 
    dateObj.setDate(dateObj.getDate() + numDays); 
 
    return dateObj; 
 
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<div class="formelementblock"> 
 
    <div class="formelement"> 
 
    <input type="text" name="txtstart_date" class="input-text datepickerwidth required" id="txtstart_date" placeholder="Start Date*" /> 
 
    </div> 
 

 
</div> 
 
<div class="formelementblock last"> 
 
    <div class="formelement"> 
 
    <input type="text" name="txtend_date" class="input-text datepickerwidth required" id="txtend_date" placeholder="End Date*" /> 
 
    </div> 
 
</div>