Question

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

能够添加两个日期选择器的天数。但我想要的是从3个datepickers花费几天时间并将其显示在第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上，当我点击按钮Fill Follow DateOne时。我不能做第二部分。请帮助我理解你的逻辑。对不起，如果我的逻辑完全错误：＆gt;

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>

如何在第一个Datepicker中添加30天，将其显示在第二个Datepicker上。并且在第3天添加3天，在第3天显示？

1 个答案: