Duncan Wardlaw Duncan Wardlaw - 6 months ago 16
jQuery Question

Iteration between dates in Javascript

I have two form fields that are storing a date output from a previous script, each input yearstart and yearend are populated with a date in the format YYYY-MM-DD. The script is triggered by an nested onchange function, in that populating the two boxes by selecting a year from another dropdown, then triggers the nested function to populate the second dropdown select item.

<input type="text" name="yearstart" id="yearstart" value="" readonly/>
<input type="text" name="yearend" id="yearend" value="" readonly/>
<select id="weekselect"></select>

<script>
function getWeeks() {
document.getElementById("weekselect").innerHTML = "";

var yearstart = new Date(document.getElementById('yearstart').value);
var yearend = new Date(document.getElementById('yearend').value);
var iDate = new Date(yearstart);

while (iDate < yearend) {
var newele = document.createElement('option');
newele.text = toJSONLocal(iDate);
document.getElementById('weekselect').appendChild(newele);
iDate.setDate(iDate.getDate() + 7)
}
}
</script>


it's working, however it's sadly only working if I select a year who's value is greater than the one already selected, so 2015, 2016 then works, but I then also get two years worth of dates not one, so I'm not sure what I'm missing. I can only surmise that the script is firing before the values are updated, but the order in which the nested scripts execute should prevent that.

Any ideas guys?

Answer

To compare 2 Date objects, use .getTime() to get the number of milliseconds since Jan 1 1970.

working code:

while (iDate.getTime() < yearend.getTime()) {

However, DOM manipulation is sometimes not synced with JS runtime, so .value of input may return wrong date. You passed some arguments to functions yet never used it.

Check out my fiddle - https://jsfiddle.net/atao634u/

function getDates() {
  var year = document.getElementById('year').value;
  year = new Date(year, 0, 1, 0, 0, 0, 0);
  if (year.getDay() == 0) {
  day=1;
  year = year.setDate(day);
  year = new Date(year);
  }
  else if (year.getDay() != 1) {
    day = 8-(year.getDay());
    year = year.setDate(day);
    year = new Date(year);
    }
  getendDates(year);
  document.getElementById('yearstart').value = year;

}
function getendDates(yearstart) {
  var year = (document.getElementById('year').value);
  year++;
  year = new Date(year, 0, 1, 0, 0, 0, 0);
  if (year.getDay() == 0) {
  day=1;
  year = year.setDate(day);
  year = new Date(year);
  }
  else if (year.getDay() != 1) {
    day = 7-(year.getDay());
    year = year.setDate(day);
    year = new Date(year);
    }
  document.getElementById('yearend').value = year;
  getWeeks(yearstart, year);
}


function getWeeks(yearstart, yearend) {
  document.getElementById("weekselect").innerHTML="";
  //var yearstart = new Date(document.getElementById('yearstart').value);
  //var yearend = new Date(document.getElementById('yearend').value);
  var iDate = new Date(yearstart);

  while (iDate.getTime() < yearend.getTime()) {
    var newele = document.createElement('option');
    newele.text = toJSONLocal(iDate);
    document.getElementById('weekselect').appendChild(newele);
    iDate.setDate(iDate.getDate() + 7)
  }
}

function toJSONLocal (date) {
    var local = new Date(date);
    local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
    return local.toJSON().slice(0, 10);
}