Date, day, month and year increment by clicking nextdate button in Javascript

Question

I am increasing and decreasing date in my application by clicking nextDay and previousDay, date is incrementing But once it reached the month end like 31, 30, 29(feb), 28(feb) then it should change the month as well as date also. But its keep on incrementing. Till now i have tried with below code

   var today = new Date();
   var days = ["Sunday","Monday","Tuesday",
                 "Wednesday","Thursday","Friday","Saturday"];
   var months = ["January","February","March",
                 "April","May","June","July","August",
                 "September","October","November","December"];
   var nextDate = 0;

function set_todayDate() {

document.getElementById("todaysDate").innerHTML = 
                        ""+days[today.getDay()]+",
                       "+months[today.getMonth()]+" 
                      "+today.getDate()+" 
                     "+today.getFullYear();

}

For next date and previous date, Just I am increasing and decreasing variable

      function nextDateMethod(){

        nextDate++;

    document.getElementById("todaysDate").innerHTML = ""+days[today.getDay()
      +dayIncrement]+ 
        ", "+months[today.getMonth()]+" 
      "+(today.getDate()+dayIncrement)+""+today.getFullYear();
    }



function prevDate(){
       nextDate--;

document.getElementById("todaysDate").
   innerHTML = months[today.getMonth()]+", 
     "+(today.getDate()+nextDate)+" "+today.getFullYear();
   }

Please anybody help me

Answer 1

Try this:

if (!Date.now) {
  Date.now = function() {
    return new Date().getTime();
  }
}
var theDate = Date.now();

document.getElementById('date').innerText = getTheDate(theDate)

document.getElementById('prev').addEventListener("click", function() {
  theDate -= 86400000;
  document.getElementById('date').innerText = getTheDate(theDate)
})
document.getElementById('next').addEventListener("click", function() {
  theDate += 86400000;
  document.getElementById('date').innerText = getTheDate(theDate)
})

function getTheDate(getDate) {
  var days = ["Sunday", "Monday", "Tuesday",
    "Wednesday", "Thursday", "Friday", "Saturday"
  ];
  var months = ["January", "February", "March",
    "April", "May", "June", "July", "August",
    "September", "October", "November", "December"
  ];
  var theCDate = new Date(getDate);
  return days[theCDate.getDay()] + ', ' + theCDate.getDate() + '-' + months[theCDate.getMonth()] + '-' + theCDate.getFullYear();
}

<div id="date" style="height:100px; width:300px;">
</div>
<button id="prev">
  <</button>
    <button id="next">></button>

Answer 2

Well, Try this(Below is the running sample):

var today = new Date();
 date = today.getDate();
 month= today.getMonth();
year= today.getFullYear();
month = month+1;

$("#Prev").click(function(){
   date = date -1;
  if(date<1){
  month = month -1;
    if(month == 0){
      year = year -1;
      date = 31;
      month = 12;
      } else{
      if(month == 2){
      date = 28
      } else if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){
       date = 31
      } else{
       date = 30
      }
      }
  }
  $("#displayDate")[0].innerHTML = date + "/" +  month + "/" + year;
});

$("#Next").click(function(){
   date = date + 1;
  if(date>28 && month == 2){
    date = 1;
    month = 3;
 } 
  if( date> 30 && (month == 4 || month == 6 || month == 9 || month == 11)){
  date = date +1;
    month = month +1;
  } else  if (date> 31){
  date =1; 
    month = month+1;
    if(month >12){
    year = year +1;
      month= 1; 
      date = 1;
    }
  }  
  
  $("#displayDate")[0].innerHTML = date + "/" +  month + "/" + year;
});

$("#displayDate")[0].innerHTML = date + "/" +  month + "/" + year;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><button id="Prev">Prev</button><div id="displayDate"></div><button id="Next">Next</button></div>

Note: Condition for Leap year is not added yet let me know if it is the expected then answer I will add that too.

Hope this will help you :)

Answer 3

I don't see why your code should automatically update month when date has reached 30 or 31 or so on. You are taking the getDate() function and this returns a number. Then, you are increasing or decreasing it by 1. It will simply act like var x=y+z. You will either have to manipulate the Date object or have to manually configure the months and leap year etc. system. I checked the Date Reference object at http://www.w3schools.com/jsref/jsref_obj_date.asp and it seems you don't have built in fucntion like addDays() as in C#. So I guess you will have to manually implement the calender rule. And also, please mention where you declared and initialized nextDate

Answer 4

Here's a simple function to add any number of days to a given date, the trick is using the setDate method of the date object

function addDays(date, days) {
    var result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
}

EDIT : since the date class is mutable you can also add a method to ease future use

Date.prototype.addDays = function(days) {
    this.setDate(this.getDate() + parseInt(days));
    return this;
};

Answer 5

There is a very neat library, called moment.js, which handles a lot of date manipulation tasks and offers various convenient ways to display dates. The webpage and the documentation are very well done, so i think it's worth looking at their effort.

This is how the requested job of increasing the day of a date would look in moment.js:

var new_date_str = moment().add(1, 'days').format("dd, MMMM, D, YYYY");

see this fiddle for a full running example: https://jsfiddle.net/me6pdk8L/2/