如何增加下一个日期和上一个日期之间的7天间隔

Question

我遇到了一个问题，我想始终在super.onCreate(savedInstanceState);之间拥有difference中的7 days

假设我的日期设置为2 dates（dd / mm / yy），然后点击下一个，它将日期设置为01/01/2018 - 07/01/2018（添加7天）

类似地，在上一个的08/01/2018 - 15/01/2018上，click应该给08/01/2018 - 15/01/2018

jsfiddle：http://jsfiddle.net/rU5Nc/2654/

这是我尝试过的：

01/01/2018 - 07/01/2018

$(document).ready(function () {
    var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();

    $('#datepicker').datepicker({
        minDate: new Date(currentYear, currentMonth, currentDate),
        dateFormat: 'dd/mm/yy'
    });
});

$(document).on("click", '.next-day', function () {
    var date = $('#datepicker').datepicker('getDate');
    date.setTime(date.getTime() + (1000*60*60*24))
    $('#datepicker').datepicker("setDate", date);
});

$(document).on("click", '.prev-day', function () {
    var date = $('#datepicker').datepicker('getDate');
    date.setTime(date.getTime() - (1000*60*60*24));
    $('#datepicker').datepicker("setDate", date);
});

.next-prev{
    display: inline-block;
    padding: 0px;
    top: -45px;
    position: relative;
    right: -243px;
}

编辑1

我的预期输出：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<p>Date:
    <input type="text" id="datepicker" value="01/01/2018 - 07/01/2018" />
</p>

<div class="next-prev">
   <div class="next-day">
       Next date >
   </div>
      <div class="prev-day">
       previous date >
   </div>
</div>

Answer 1

将date.setTime(date.getTime() + (1000*60*60*24))（单击.next-day时）更改为date.setDate(date.getDate() + 6)，以增加六天的时间。

将date.setTime(date.getTime() - (1000*60*60*24));（单击.prev-day时）更改为date.setDate(date.getDate() - 6)。

还删除minDate属性以阻止其跳至当前日期。

$(document).ready(function () {
    var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();

    $('#datepicker').datepicker({
        //minDate: new Date(currentYear, currentMonth, currentDate),
        dateFormat: 'dd/mm/yy'
    });
    showNext();
    showPrevious();
});

$(document).on("click", '.next-day', function () {
    var date = $('#datepicker').datepicker('getDate');
    date.setDate(date.getDate() + 6)
    $('#datepicker').datepicker("setDate", date);
    showNext();
    showPrevious();
});
function showNext(){
	var date = $('#datepicker').datepicker('getDate');
  var dateStr = getDateString(date);
  var next = date;
  next.setDate(date.getDate()+6);
  var nextStr = getDateString(next);
  $('.next-day').text("Next date ("+dateStr+"-"+nextStr+") >");
}
function showPrevious(){
	var date = $('#datepicker').datepicker('getDate');
  var dateStr = getDateString(date);
  var previous = date;
  previous.setDate(date.getDate()-6);
  var previousStr = getDateString(previous);
  $('.prev-day').text("Previous date ("+dateStr+"-"+previousStr+") >");
}
function getDateString(date){
var dd = date.getDate();
var mm = date.getMonth()+1; //January is 0!

var yyyy = date.getFullYear();
if(dd<10){
    dd='0'+dd;
} 
if(mm<10){
    mm='0'+mm;
} 
return dd+'/'+mm+'/'+yyyy;
}
$(document).on("click", '.prev-day', function () {
    var date = $('#datepicker').datepicker('getDate');
    date.setDate(date.getDate() - 6);
    $('#datepicker').datepicker("setDate", date);
    showNext();
    showPrevious();
});

.next-prev{
    display: inline-block;
    padding: 0px;
    top: -45px;
    position: relative;
    right: -243px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<p>Date:
    <input type="text" id="datepicker" value="01/01/2018" />
</p>

<div class="next-prev">
   <div class="next-day">
       Next date >
   </div>
      <div class="prev-day">
       previous date >
   </div>
</div>

Answer 2

使用date.setDate()更新日期很简单。 MDN Docs for reference

$(document).ready(function () {
    $('#datepicker').datepicker({
        dateFormat: 'dd/mm/yy'
    });
});

$(document).on("click", '.next-day', function () {
    var date = $('#datepicker').datepicker('getDate');
    date.setDate(date.getDate() + 7)
    $('#datepicker').datepicker("setDate", date);
});

$(document).on("click", '.prev-day', function () {
    var date = $('#datepicker').datepicker('getDate');
    date.setDate(date.getDate() - 7)
    $('#datepicker').datepicker("setDate", date);
});

.next-prev{
    display: inline-block;
    padding: 0px;
    top: -45px;
    position: relative;
    right: -243px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<p>Date:
    <input type="text" id="datepicker" value="01/01/2018" />
</p>

<div class="next-prev">
   <div class="next-day">
       Next week >
   </div>
      <div class="prev-day">
       previous week >
   </div>
</div>

Answer 3

第二天活动设置日期之内

date.setDate(date.getDate() + 7);

在前一天活动设置日期之内

date.setDate(date.getDate() - 7);

Answer 4

使用date.setDate()方法。 Documentation。

// Get current date
let date = new Date();

// Increment date (day) by 7
date.setDate(date.getDate() + 7);


console.log(date);

如果您想减少一个星期，只需减去而不是加。

Answer 5

我测试了它在date.setTime(date.getTime() + (1000*60*60*168))上的正常运行，并且您应该删除minDate: new Date(currentYear, currentMonth, currentDate)，它会限制您直到单击前一天的当前日期。   http://jsfiddle.net/rU5Nc/2703/

$(document).on("click", '.next-day', function () {
 console.log('clicked');
var date = $('#datepicker').datepicker('getDate');
date.setTime(date.getTime() + (1000*60*60*168))
$('#datepicker').datepicker("setDate", date);});


$(document).on("click", '.prev-day', function () {
var date = $('#datepicker').datepicker('getDate');
 console.log(date);
date.setTime(date.getTime() - (1000*60*60*168));
$('#datepicker').datepicker("setDate", date);});