2016-07-27 54 views
0

我有兩個datepciker文本框現在我想要什麼時,我選擇任何日期從第一個datepicker,在第二個datepicker + 7天自動選擇。想要獲取+7選定日期的日期

例如。在第一日期選擇器 所選日期:27-07-2016 第二日期選擇器應該自動:2016年3月8日

$(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>

回答

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>