how to add seven days gap between next and previous date

Question

I'm struck in a problem where i want to always have difference of 7 days between 2 dates

Suppose if my date is set to 01/01/2018 - 07/01/2018 (dd/mm/yy) then on click of next it give date as 08/01/2018 - 15/01/2018 (7 days addition)

similarly on click of previous 08/01/2018 - 15/01/2018 should give 01/01/2018 - 07/01/2018

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

Here is what i have tried:

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

EDIT 1

my expected output:

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>

Possible duplicate of [Add days to JavaScript Date](https://stackoverflow.com/questions/563406/add-days-to-javascript-date) — Heretic Monkey, Jul 25 '18 at 19:02
i wanted to show `7 days` difference in `input` only on each click of `next or previous` like this http://jsfiddle.net/3wxr2vbd/2/ **or please see edit 1 below** — EaBengaluru, Jul 26 '18 at 01:28
The duplicate shows how to add any number of days to a JavaScript Date. Please at least attempt to use the code in the answers to your problem and see if you can figure it out. — Heretic Monkey, Jul 26 '18 at 15:57
@HereticMonkey, i'm unable to figure out without conflicting, sometime it goes beyond 31 and sometime 0 **(unable to maintain 7 days gap b/w them)** — EaBengaluru, Jul 26 '18 at 16:05

Unmitigated · Accepted Answer · 2018-07-28T01:17:12.687

Change date.setTime(date.getTime() + (1000*60*60*24)) (when clicking on .next-day) to date.setDate(date.getDate() + 6) to add six days.

Change date.setTime(date.getTime() - (1000*60*60*24)); (when clicking on .prev-day) to date.setDate(date.getDate() - 6).

Also remove the minDate property to stop it from jumping to the current date.

$(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 You want the next and previous buttons to skip six days at a time? — Unmitigated, Jul 26 '18 at 15:18
yes you got it like this `01/01/2018 - 07/01/2018` in that input box only — EaBengaluru, Jul 26 '18 at 15:41
sorry for late reply, yes your code is correct but i want show the user date range on each click of next or previous. like this `01/01/2018 - 07/01/2018`. what i meant is in your code your are showing in a single range, but i want like this `prev - next + 7` — EaBengaluru, Jul 27 '18 at 00:47
@skBangalore I have edited my code to implement the changes you wanted. — Unmitigated, Jul 27 '18 at 13:20
i think you forgot removing parameter `showPrevious(date);` not using parameter any where according to me — EaBengaluru, Jul 28 '18 at 01:13

score 0 · Answer 2 · answered Jul 25 '18 at 18:53

Its simple to update date using 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>

while adding and subtracting days you are doing it only for 1 day `(1000*60*60*24)`. — Ubaid Azad, Jul 25 '18 at 18:55

score 0 · Answer 3 · answered Jul 25 '18 at 18:56

0

inside your next day event set date like

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

inside your previous day event set date like

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

answered Jul 25 '18 at 18:56

Vaibhav

1,481
13
17

score 0 · Answer 4 · answered Jul 25 '18 at 19:11

Use the date.setDate() method. Documentation.

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

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


console.log(date);

If you'd instead like to decrement by a week, simply subtract instead of adding.

Kiran Ghatage · Answer 5 · 2018-07-26T07:34:52.667

I tested it working fine with date.setTime(date.getTime() + (1000*60*60*168)) and You should remove minDate: new Date(currentYear, currentMonth, currentDate) it restricts you till current date when you clicked on the previous day. 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);});

how to add seven days gap between next and previous date

5 Answers5