Разница дат из строки JS

347
29 сентября 2017, 20:27

Тут я попытался изобразить следующее:

  1. В первом поле должна подставляться настоящая дата в дд.мм.гггг формате, во второе поле дата на 3 дн больше.
  2. Нужно каким-то образом вычислять разницу в днях между двумя полями, чтобы потом через JS менять стили таблицы в зависимости от количества дней.

//взятие настоящей даты 
var d = new Date(); 
var day = d.getDate(); 
if (day < 10) { 
  day = '0' + day; 
} //добавление нуля перед цифрами до 10 
var month = d.getMonth() + 1; 
if (month < 10) { 
  month = '0' + month; 
} //добавление нуля перед цифрами до 10 
var year = d.getFullYear(); 
var feedCar = document.getElementById('my_lease_from'); 
feedCar.value = day + "-" + month + "-" + year; 
 
//добавление даты возвращения через 3 дня 
var d2 = new Date(); 
var day2 = d2.getDate() + 3; 
if (day2 < 10) { 
  day2 = '0' + day2; 
} //добавление нуля перед цифрами до 10 
var month2 = d2.getMonth() + 1; 
if (month2 < 10) { 
  month2 = '0' + month2; 
} //добавление нуля перед цифрами до 10 
var year2 = d2.getFullYear(); 
var returnCar = document.getElementById('my_lease_before'); 
returnCar.value = day2 + "-" + month2 + "-" + year2; 
 
 
 
//выделение кружком текущего тарифа по дням 
var textFeed = document.getElementById('my_lease_from').value; 
var dateFeed = Date.parse(textFeed); 
//var dateFeed = new Date(textFeed.replace(/(\d+)-(\d+)-(\d+)/, '$2/$3/$1')); 
var textReturn = returnCar.value = year + "-" + month + "-" + day; 
 
alert(dateFeed); 
alert(dateRerurn);
<label> 
	<span>Аренда до :</span>  
	<input type="data" name="my_lease_before" id="my_lease_before"> 
</label> 
<label> 
	<span>Аренда от :</span>  
	<input type="data" name="my_lease_from" id="my_lease_from"> 
</label>

Answer 1

Вот простенький пример, как ето можно сделать :

document.addEventListener('DOMContentLoaded', function() { 
  var dTo = document.querySelector('#my_lease_before'); 
  var dFrom = document.querySelector('#my_lease_from'); 
 
  // получаем сегодняшнюю дату 
  var dNow = new Date(); 
  // создаем переменную для даты на 3 дня вперед 
  var dThen = new Date(); 
  // добавляем 3 дня 
  dThen.setDate(dThen.getDate() + 3); 
 
  // записываем значения в инпуты 
  dTo.value = formatDate(dNow); 
  dFrom.value = formatDate(dThen); 
 
  // дата - дата = число (милдисикунды) 
  // поетому с помощью деления выщитываем количество дней 
  // так как в функции parseDate время поставили по нулям, кол-во дней всегда будет целое 
  // ето сделано с ращетом на то что время не играет роли 
  var dd = (dThen - dNow) / 1000 / 60 / 60 / 24; 
  console.log(dd); 
}); 
 
function formatDate(date) { 
  // для добавления нулей вначале юзаем функцию padStart 
  // она работает со строками, поетому приводим числа к строке 
  return [ 
    date.getDate().toString().padStart(2, '0'), 
    (date.getMonth() + 1).toString().padStart(2, '0'), 
    date.getFullYear() 
  ].join('.'); 
  // join соеденяет елементы масива в строку через указаный разделитель 
}; 
 
function parseDate(date) { 
  var tmp = date.split('.'); 
  return new Date(tmp[2], tmp[1], tmp[0], 0, 0, 0, 0); 
};
<label> 
	<span>Аренда до :</span>  
	<input type="data" name="my_lease_before" id="my_lease_before"> 
</label> 
<label> 
	<span>Аренда от :</span>  
	<input type="data" name="my_lease_from" id="my_lease_from"> 
</label>

Чутка "поправил" ваш код с фидла : 

document.addEventListener('DOMContentLoaded', function() { 
  var dFrom = document.querySelector('#my_lease_before'); 
  var dTo = document.querySelector('#my_lease_from'); 
  document.querySelector('#btn').addEventListener('click', function() { 
    // получаем сегодняшнюю дату 
    var dNow = new Date(); 
    // создаем переменную для даты на 3 дня вперед 
    var dThen = new Date(); 
    // добавляем 3 дня 
    dThen.setDate(dThen.getDate() + 3); 
 
    // записываем значения в инпуты 
    dTo.value = formatDate(dNow); 
    dFrom.value = formatDate(dThen); 
 
    // дата - дата = число (милдисикунды) 
    // поетому с помощью деления выщитываем количество дней 
    // так как в функции parseDate время поставили по нулям, кол-во дней всегда будет целое 
    // ето сделано с ращетом на то что время не играет роли 
    var dd = (dThen - dNow) / 1000 / 60 / 60 / 24; 
    console.log(dd); 
    //alert(dd); 
    if (dd <= 1) { 
      var s1 = document.querySelector('.space-1'); 
      s1.style.borderRadius = '50%'; 
      s1.style.background = 'red'; 
      s1.style.display = 'inline-block'; 
      s1.style.color = 'white'; 
      s1.style.padding = '5px 2px'; 
    } else if (dd > 1 && dd <= 2) { 
      var s2 = document.querySelector('.space-2'); 
      s2.style.borderRadius = '50%'; 
      s2.style.background = 'red'; 
      s2.style.display = 'inline-block'; 
      s2.style.color = 'white'; 
      s2.style.padding = '5px 2px'; 
    } else if (dd > 2 && dd <= 6) { 
      var s3 = document.querySelector('.space-3'); 
      s3.style.borderRadius = '50%'; 
      s3.style.background = 'red'; 
      s3.style.display = 'inline-block'; 
      s3.style.color = 'white'; 
      s3.style.padding = '5px 2px'; 
    } 
  }); 
}); 
 
function formatDate(date) { 
  // для добавления нулей вначале юзаем функцию padStart 
  // она работает со строками, поетому приводим числа к строке 
  return [ 
    date.getDate().toString().padStart(2, '0'), 
    (date.getMonth() + 1).toString().padStart(2, '0'), 
    date.getFullYear() 
  ].join('.'); 
  // join соеденяет елементы масива в строку через указаный разделитель 
}; 
 
function parseDate(date) { 
  var tmp = date.split('.'); 
  return new Date(tmp[2], tmp[1], tmp[0], 0, 0, 0, 0); 
 
};
.space-1, 
.space-2, 
.space-3 { 
  display: none; 
}
<button id="btn">magic</button> 
<br/> 
 
<label> 
  <span>Аренда до :</span> 
  <input type="data" name="my_lease_before" id="my_lease_before"> 
</label> 
<label> 
  <span>Аренда от :</span> 
  <input type="data" name="my_lease_from" id="my_lease_from"> 
</label> 
<div class="space-1"></div> 
<div class="space-2"></div> 
<div class="space-3"></div>

READ ALSO
Uncaught RangeError: Unsupported time zone specified undefined
javascript

Uncaught RangeError: Unsupported time zone specified undefined

Попытка в Хроме вызвать toLocaleString у даты на любой вкладке кроме about:blank падает с ошибкой

 497
JS / onload / querySelector / одинарные косые кавычки / ${&hellip;}
javascript

JS / onload / querySelector / одинарные косые кавычки / ${…}

Есть функция, которая заменяет дивы на картинки:

 336
Как передавать параметры в скрипт?
javascript

Как передавать параметры в скрипт?

Нужно в скрипт передавать данные в таком виде:

 255
Подключение React в проект [требует правки]
javascript

Подключение React в проект [требует правки]

Необходимо подключить библиотеку react в уже готовый проект и вывести с его помощью любой массив данных, в проекте используется gulpКак это сделать...

 281