javascript - 如何向第一个日期选择器添加 30 天，并将其显示在第二个日期选择器上。并将 3 天添加到 2nd ，将其显示在 3rd 上？

Question

我是 jQuery 和 JavaScript 新手。所以请帮我解决我的问题。

能够使用两个日期选择器添加天数。但我想要的是从 3 个日期选择器中取出几天并将其显示在第 4 个日期选择器上。我想知道这个问题的解决方案!

我的代码是:)

<p>Date:
    <input id="txtDate" type="text" />
</p>

<p>
    <input type="button" onclick="getdate()" value="Fill Follow Date" />
</p>

<p>Date:
    <input id="follow_Date" type="text" />
</p>

<p>
    <input type="button" onclick="getdate()" value="Fill Follow DateOne" />
</p>
<p>Date:
    <input id="follow_Date_One" type="text" />
</p>
<script>
$(document).ready(function () {
    $('#txtDate').datepicker();
    $('#follow_Date').datepicker();
    $('#follow_Date_One').datepicker();
});

function getdate() {
    var tt = document.getElementById('txtDate').value;

    var date = new Date(tt);
    var newdate = new Date(date);

    newdate.setDate(newdate.getDate() + 30);

    var dd = newdate.getDate();
    var mm = newdate.getMonth() + 1;
    var y = newdate.getFullYear();

    var someFormattedDate = mm + '/' + dd + '/' + y;
    document.getElementById('follow_Date').value = someFormattedDate;

    var rr = document.getElementById('follow_Date').value;

    var dateOne = new Date(rr);
    var newdateOne = new Date(dateOne);

    newdateOne.setDate(newdateOne.getDate() + 3);

    ar dd = newdateOne.getDate();
    var mm = newdateOne.getMonth() + 1;
    var y = newdateOne.getFullYear();

    var someFormattedDateOne = mm + '/' + dd + '/' + y;
    document.getElementById('follow_Date_One').value = someFormattedDateOne;



}
</script>
</form>

这里所做的是，我从第一个Datepicker中获取日期，当我单击按钮Fill Follow Date时，30将添加到当前日期并显示在第二个 Datepicker 中，这是我能够做到的。

现在我想获取第二个 Datepicker day 并向其添加 3 并将其显示在第三个 Datepicker 上，当我单击按钮填充关注 DateOne。我无法完成第二部分。请帮我解释一下你的逻辑。抱歉，如果我的逻辑完全错误:>

Answer 1

在两个按钮单击的代码中，您调用相同的函数，为这些按钮单击添加两个单独的函数。它会正常工作。

尝试此代码

$(document).ready(function () {
$('#txtDate').datepicker();
$('#follow_Date').datepicker();
$('#follow_Date_One').datepicker();

$('input[id="follow_Date_btn"]').on('click',function(){
var tt = document.getElementById('txtDate').value;
 if(!tt==""){
var date = new Date(tt);
var newdate = new Date(date);

newdate.setDate(newdate.getDate() + 30);

var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();

var someFormattedDate = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date').value = someFormattedDate;
} else {
alert("enter date");
}
});
  $('input[id="follow_Date_One_btn"]').on('click',function(){
var rr = document.getElementById('follow_Date').value;
if(!rr==""){
var dateOne = new Date(rr);
var newdateOne = new Date(dateOne);

newdateOne.setDate(newdateOne.getDate() + 3);

var dd = newdateOne.getDate();
var mm = newdateOne.getMonth() + 1;
var y = newdateOne.getFullYear();

var someFormattedDateOne = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date_One').value = someFormattedDateOne;
    } else {
alert("enter date");
}
  });
});

   .Highlighted a {
    background-color: Red !important;
    background-image: none !important;
    color: White !important;
}
.block{
  width:calc(100%/4 - 10px);
  float:left;
  margin-right:10px;
}
 .block>input {
float: left;
width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<p>Date:
<input id="txtDate" type="text" />
</p>

<p>
<input type="button" id="follow_Date_btn" value="Fill Follow Date" />
</p>

<p>Date:
<input id="follow_Date" type="text" />
</p>

<p>
<input type="button" id="follow_Date_One_btn" value="Fill Follow DateOne" />
</p>
<p>Date:
<input id="follow_Date_One" type="text" />
</p>