javascript Calendar subtracting dates

Question

I have a calendar that allows 2 clicks then resets. I want the difference in days between the 2 calendar dates clicked. I then display this on another page. I tried assigning local storage variables that are assigned by a onclick function for each calendar day clicked then reset after the 3rd click. I wanted to subtract all of the dates ordering the highest number to lowest in an attempt to make my math work for any 2 days picked. The problem is when my variables come through they are negative whereas the variable created on the second click needs to be positive. I would really appreciate some help for a strategy to resolve this.

<!--Booking.html-->

 var clickCount = 0; var clickCountMax = 2; document.getElementById("grid-calendar").onclick = function() { clickCount ++; if(clickCount > clickCountMax) { document.getElementById("h1").style.background = ""; document.getElementById("h2").style.background = ""; document.getElementById("h3").style.background = ""; document.getElementById("h4").style.background = ""; document.getElementById("h5").style.background = ""; document.getElementById("h6").style.background = ""; document.getElementById("h7").style.background = ""; document.getElementById("h8").style.background = ""; document.getElementById("h9").style.background = ""; document.getElementById("h10").style.background = ""; document.getElementById("h11").style.background = ""; document.getElementById("h12").style.background = ""; document.getElementById("h13").style.background = ""; document.getElementById("h14").style.background = ""; document.getElementById("h15").style.background = ""; document.getElementById("h16").style.background = ""; document.getElementById("h17").style.background = ""; document.getElementById("h18").style.background = ""; document.getElementById("h19").style.background = ""; document.getElementById("h20").style.background = ""; document.getElementById("h21").style.background = ""; document.getElementById("h22").style.background = ""; document.getElementById("h23").style.background = ""; document.getElementById("h24").style.background = ""; document.getElementById("h25").style.background = ""; document.getElementById("h26").style.background = ""; document.getElementById("h27").style.background = ""; document.getElementById("h28").style.background = ""; document.getElementById("h29").style.background = ""; document.getElementById("h30").style.background = ""; localStorage.setItem("h1", '0'); localStorage.setItem("h2", '0'); localStorage.setItem("h3", '0'); localStorage.setItem("h4", '0'); clickCount =0; return; } }; function h1() { document.getElementById("h1").style.background = "green"; localStorage.setItem("h1", '1'); } function h2() { document.getElementById("h2").style.background = "green"; localStorage.setItem("h2", '2'); } function h3() { document.getElementById("h3").style.background = "green"; localStorage.setItem("h3", '3'); } function h4() { document.getElementById("h4").style.background = "green"; localStorage.setItem("h4", '4'); }

 <head> <link rel="stylesheet" href="booking.css"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> <link rel="javascript" href="bootstrap-3.3.7-dist/js/bootstrap.js"> </head> <?php session_start(); if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true) { $user_logged_in= 'true'; } else { // header('Location: staffindex.html'); } ?> <script> localStorage.setItem("h1", '0'); localStorage.setItem("h2", '0'); localStorage.setItem("h3", '0'); localStorage.setItem("h4", '0'); </script> <div class="container"> <h1>Bootstrap - Booking Calendar</h1> <div id ="grid-calendar" class="grid-calendar"> <div class="row calendar-week-header"> <div class="col-xs-1 grid-cell"><div><div><span>S</span></div></div> </div> <div class="col-xs-1 grid-cell"><div><div><span>M</span></div></div> </div> <div class="col-xs-1 grid-cell"><div><div><span>T</span></div></div> </div> <div class="col-xs-1 grid-cell"><div><div><span>W</span></div></div> </div> <div class="col-xs-1 grid-cell"><div><div><span>T</span></div></div> </div> <div class="col-xs-1 grid-cell"><div><div><span>F</span></div></div> </div> <div class="col-xs-1 grid-cell"><div><div><span>S</span></div></div> </div> </div> <div class="row calendar-week"> <div class="col-xs-1 grid-cell previous-month"><div><div> <span>31</span></div></div></div> <div onclick="h1()" class="col-xs-1 grid-cell"><div id="h1"><div> <span>1</span></div></div></div> <div onclick="h2()" class="col-xs-1 grid-cell"><div id="h2"><div> <span>2</span></div></div></div> <div onclick="h3()" class="col-xs-1 grid-cell"><div id="h3"><div> <span>3</span></div></div></div> <div onclick="h4()" class="col-xs-1 grid-cell"><div id="h4"><div> <span>4</span></div></div></div> <div onclick="h5()" class="col-xs-1 grid-cell"><div id="h5"><div> <span>5</span></div></div></div> <div onclick="h6()" class="col-xs-1 grid-cell"><div id="h6"><div> <span>6</span></div></div></div> </div> <div class="row calendar-week"> <div onclick="h7()" class="col-xs-1 grid-cell"><div id="h7"><div> <span>7</span></div></div></div> <div onclick="h8()" class="col-xs-1 grid-cell"><div id="h8"><div> <span>8</span></div></div></div> <div onclick="h9()" class="col-xs-1 grid-cell"><div id="h9"><div> <span>9</span></div></div></div> <div onclick="h10()" class="col-xs-1 grid-cell"><div id="h10"><div> <span>10</span></div></div></div> <div onclick="h11()" class="col-xs-1 grid-cell"><div id="h11"><div> <span>11</span></div></div></div> <div onclick="h12()" class="col-xs-1 grid-cell"><div id="h12"><div> <span>12</span></div></div></div> <div onclick="h13()" class="col-xs-1 grid-cell"><div id="h13"><div> <span>13</span></div></div></div> </div> <div class="row calendar-week"> <div onclick="h14()" class="col-xs-1 grid-cell"><div id="h14"><div> <span>14</span></div></div></div> <div onclick="h15()" class="col-xs-1 grid-cell"><div id="h15"><div> <span>15</span></div></div></div> <div onclick="h16()" class="col-xs-1 grid-cell"><div id="h16"><div> <span>16</span></div></div></div> <div onclick="h17()" class="col-xs-1 grid-cell"><div id="h17"><div> <span>17</span></div></div></div> <div onclick="h18()" class="col-xs-1 grid-cell"><div id="h18"><div> <span>18</span></div></div></div> <div onclick="h19()" class="col-xs-1 grid-cell"><div id="h19"><div> <span>19</span></div></div></div> <div onclick="h20()" class="col-xs-1 grid-cell"><div id="h20"><div> <span>20</span></div></div></div> </div> <div class="row calendar-week"> <div onclick="h21()" class="col-xs-1 grid-cell"><div id="h21"><div> <span>21</span></div></div></div> <div onclick="h22()" class="col-xs-1 grid-cell"><div id="h22"><div> <span>22</span></div></div></div> <div onclick="h23()" class="col-xs-1 grid-cell"><div id="h23"><div> <span>23</span></div></div></div> <div onclick="h24()" class="col-xs-1 grid-cell"><div id="h24"><div> <span>24</span></div></div></div> <div onclick="h25()" class="col-xs-1 grid-cell"><div id="h25"><div> <span>25</span></div></div></div> <div onclick="h26()" class="col-xs-1 grid-cell"><div id="h26"><div> <span>26</span></div></div></div> <div onclick="h27()" class="col-xs-1 grid-cell"><div id="h27"><div> <span>27</span></div></div></div> </div> <div class="row calendar-week"> <div onclick="h28()" class="col-xs-1 grid-cell"><div id="h28"><div> <span>28</span></div></div></div> <div onclick="h29()" class="col-xs-1 grid-cell"><div id="h29"><div> <span>29</span></div></div></div> <div onclick="h30()" class="col-xs-1 grid-cell"><div id="h30"><div> <span>30</span></div></div></div> <div class="col-xs-1 grid-cell next-month"><div><div><span>1</span> </div></div></div> <div class="col-xs-1 grid-cell next-month"><div><div><span>2</span> </div></div></div> <div class="col-xs-1 grid-cell next-month"><div><div><span>3</span> </div></div></div> <div class="col-xs-1 grid-cell next-month"><div><div><span>4</span> </div></div></div> </div> </div> </div>

.....................................


<!--Book.html-->

  document.getElementById("result").innerHTML = parseInt(localStorage.getItem("h4")) - parseInt(localStorage.getItem("h3")) - parseInt(localStorage.getItem("h2")) - parseInt(localStorage.getItem("h1")); for(var i in localStorage) { console.log(i + ' = ' + localStorage[i]); }

  <div id ="result"> </div>

Answer 1

Firstly, the approach you are taking here is an awful mess and I think you should reconsider how the calendar is rendered, how the events are handled, and how you store the data! In the meantime I will try to help with what you have...

You have cut out chunks of code, but the pattern is apparent. Presumably the localStorage will have 2 out of the 31 "hN" values set. And also you will presumably clear those down after retrieving them.

In which case you could do something like this to find the max and min dates that were set. The subtraction is then very simple.

var checkKey, checkDate, minDate = 31, maxDate = 1;
for (var i = 1; i <= 31; i++) {
  checkKey = "h" + i;
  checkDate = parseInt(localStorage[checkKey]);
  localStorage.removeItem(checkKey);
  if (checkDate) {
    minDate = Math.min(minDate, checkDate);
    maxDate = Math.max(maxDate, checkDate);
  }
}

var number_of_days_inclusive = maxDate - minDate + 1;

javascript Calendar subtracting dates

Question

1 answers

solution1
0 2018-02-23 01:32:59

javascript Calendar subtracting dates

Question

1 answers

solution1 0 2018-02-23 01:32:59

solution1
0 2018-02-23 01:32:59