Разница между двумя введенными датами в днях

147

03 июля 2018, 00:10

 var inputDateOne = document.createElement('input'), 
     	inputDateTwo = document.createElement('input'), 
    	inputDateResult = document.createElement('input'); 
     
    inputDateOne.type = 'data'; 
    inputDateOne.name = 'valuer'; 
     
    document.body.appendChild(inputDateOne); 
     
    inputDateTwo.type = 'data'; 
    inputDateTwo.name = 'valuer'; 
     
    document.body.appendChild(inputDateTwo); 
     
    inputDateResult.type = 'data'; 
    inputDateResult.name = 'valuer'; 
     
    document.body.appendChild(inputDateResult);

Собственно, вот есть инпуты. В первых двух нужно ввести даты, а в третьем получить разницу этих дат в днях. Мне бы хотя бы алгоритм выполнения, а не сам код

Answer 1

Внутреннее представление типа Date это Number. Мы можем получать разницу между датами, просто приводя значения их переменных к числу, и вычисляя разность.

Пример:

const DAY_MS = 864e5; 
document.addEventListener('DOMContentLoaded', () => { 
  for (let di of document.querySelectorAll('[type="date"]')) { 
    di.valueAsDate = new Date();  
    di.addEventListener('input', getDiff);  
  } 
  let diff = document.getElementById('diff');  
  diff.addEventListener('input', setDiff);  
  setDiff(diff);  
}); 
 
function getDiff() { 
  const left  = document.getElementById('left'),  
        right = document.getElementById('right'),  
        diff  = document.getElementById('diff') ;  
  diff.value = Math.abs(Math.round(left.valueAsDate - right.valueAsDate) / DAY_MS);  
} 
 
function setDiff(e) { 
  const left  = document.getElementById('left'),  
        right = document.getElementById('right'),  
        diff  = e instanceof Event ? e.target : e;  
  let diffV = parseInt(diff.value) || 0; 
  if (Math.abs(diffV) > 999) { 
    diff.reportValidity();  
    return;  
  } 
  switch (Math.sign(diffV)) { 
    case -1:  
      left.valueAsDate = new Date(+right.valueAsDate + diffV * DAY_MS);  
      break;  
    case 1:  
      right.valueAsDate = new Date(+left.valueAsDate + diffV * DAY_MS);  
      break;  
    default:  
      right.valueAsDate = left.valueAsDate;  
  } 
}

input, span { font: 18px sans-serif; } 
input       { width: 120px; } 
.u--shiftnext-30px     { padding-right: 30px; box-sizing: border-box; } 
.u--shiftnext-30px + * { margin-left: -30px; pointer-events: none; }

<input id="left" type="date" /> 
<input id="right" type="date" /> 
◀▶ 
<input id="diff" class="u--shiftnext-30px" min="-999" max="999" type="number" value="7"/><span>дн.</span>

В примере, ввод дат всегда возвращает разницу по модулю. Ввод разницы: если <0, то меняется левая дата; если >0, то правая.

Answer 2

Вычислить разницу м/у датами в миллисекундах: date1.getTime() - date2.getTime(); А затем поделить на кол-во миллисекунд в 24 часах - 86400000. Я рекомендую использовать momentjs для операций с датами.