如何在下一个日期和上一个日期之间添加 7 天的间隔答案

【问题标题】：how to add seven days gap between next and previous date如何在下一个日期和上一个日期之间添加 7 天的间隔
【发布时间】：2018-07-28 09:17:12
【问题描述】：

我遇到了一个问题，我希望在7 days 之间始终拥有difference 和2 dates

假设如果我的日期设置为 01/01/2018 - 07/01/2018 (dd/mm/yy) 然后点击 next 它将日期设置为 08/01/2018 - 15/01/2018（增加 7 天）

类似地在 previous 的 click 上 08/01/2018 - 15/01/2018 应该给 01/01/2018 - 07/01/2018

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

这是我尝试过的：

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

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

编辑 1

我的预期输出：

Always next previous should have 7 days gap, without conflicting, and result should appear like below (maintaining 7 days gap on each click)

<br/>

<hr>

 please don't worry on calendar display as i have multiple select in my project, producing same here is not possible, thanks 

<p><input type="text" value="01/01/2018 - 07/01/2018"></p>

【问题讨论】：

Add days to JavaScript Date的可能重复
我只想在每次点击next or previous 时显示7 days 与input 的差异，就像这样jsfiddle.net/3wxr2vbd/2 或请参阅下面的编辑1
我不介意使用moment.js
副本展示了如何将任意天数添加到 JavaScript 日期。请至少尝试在您的问题的答案中使用代码，看看您是否能弄清楚。
@HereticMonkey，我无法在没有冲突的情况下弄清楚，有时它会超过 31 有时会超过 0 （无法保持 7 天的间隔）跨度>

标签： javascript jquery html node.js datepicker

【解决方案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>

【讨论】：

@skBangalore 您希望下一个和上一个按钮一次跳过六天？
是的，你只在那个输入框中得到了这样的01/01/2018 - 07/01/2018
@skBangalore 我发布的代码是你想要的吗？
抱歉回复晚了，是的，您的代码是正确的，但我想在每次点击下一个或上一个时显示用户日期范围。像这样01/01/2018 - 07/01/2018。我的意思是在你的代码中你显示在一个范围内，但我想要这样prev - next + 7
@skBangalore 我已经编辑了我的代码以实现您想要的更改。

【解决方案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>

【讨论】：

在加减天数时，您只做 1 天 (1000*60*60*24).

【解决方案3】：

在您的第二天活动设置日期内，例如

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

在您前一天的事件设置日期中，例如

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

【讨论】：

【解决方案4】：

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

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

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


console.log(date);

如果您想减少一周，只需减去而不是增加。

【讨论】：

【解决方案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);});

【讨论】：