Javascript-форум - Сравнить дату с сегодняшней

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Сравнить дату с сегодняшней (https://javascript.ru/forum/misc/73196-sravnit-datu-s-segodnyashnejj.html)

saldek

28.03.2018 18:06

Сравнить дату с сегодняшней и поменять стили от ображения даты

Здравствуйте, уважаемые знатоки!
Есть поля дат, заключенные в span, в этих полях уже сохранены даты в формате день.месяц.год (к примеру 28.03.2018)
Вопрос:
Как сравнить все сохраненные даты с сегодняшней и поменять стиль span?
К примеру, если сохраненная дата наступит через 3 дня цвет даты поменять на оранжевый, а если наступит завтра - то на красный?
Спасибо всем за помощь

j0hnik

28.03.2018 20:37

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<span>28.03.2018</span><br>
	<span>29.03.2018</span><br>
	<span>30.03.2018</span><br>
	<span>31.03.2018</span><br>
	<span>01.04.2018</span><br>
	<span>02.04.2018</span><br>
	<script>
		var now = Date.now();
		[].forEach.call(document.querySelectorAll('span'), function(el){
			var date = el.textContent.replace(/(\d+)\.(\d+)\.(\d+)/, '$3,$2,$1');
			date = Date.parse(date);
			var ost = date - now;
			if(ost>86400000*4) el.style.color = '#00ff00';
			else if(ost>86400000*3) el.style.color = '#44CC00';
			else if(ost>86400000*2) el.style.color = '#77AA00';
			else if(ost>86400000) el.style.color = '#DD8800';
			else if(ost>0) el.style.color = '#ff7700';
			else el.style.color = '#ff0000';
			console.log(date);
		});
	</script>
</body>
</html>

цвета если не подходят сами укажите

рони	28.03.2018 21:59

j0hnik,
'$2-$1-$3' так надёжнее!
else if не слишком ли много!

рони	28.03.2018 22:08

saldek,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <span>28.03.2018</span><br>
  <span>29.03.2018</span><br>
  <span>30.03.2018</span><br>
  <span>31.03.2018</span><br>
  <span>01.04.2018</span><br>
  <span>02.04.2018</span><br>
  <script>
    var now = Date.now();
    [].forEach.call(document.querySelectorAll('span'), function(el){
      var color = ['#ff0000','#ff7700','#DD8800','#77AA00','#44CC00','#00ff00'],
      date = el.textContent.replace(/(\d+)\.(\d+)\.(\d+)/, '$2/$1/$3');
      date = Date.parse(date);
      date = (date - now)/86400000|0||0;
      var ost = Math.max(0,Math.min(color.length,date));
      el.style.color = color[ost];
    });
  </script>
</body>
</html>

рони	28.03.2018 22:36

Цитата:

Сообщение от saldek

дата наступит через 3 дня цвет даты поменять на оранжевый, а если наступит завтра - то на красный?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <span>28.03.2018</span><br>
  <span>29.03.2018</span><br>
  <span>30.03.2018</span><br>
  <span>31.03.2018</span><br>
  <span>01.04.2018</span><br>
  <span>02.04.2018</span><br>
  <script>
    var color = {1 : 'Red', 3 : 'Orange'},now = new Date();
     now.setHours(0, 0, 0, 0);
    [].forEach.call(document.querySelectorAll('span'), function(el){
      date = el.textContent.replace(/(\d+)\.(\d+)\.(\d+)/, '$2/$1/$3');
      date = Date.parse(date);
      var ost = (date - now)/86400000|0;
      color[ost] && (el.style.color = color[ost]);
    });
  </script>
</body>
</html>

j0hnik

28.03.2018 23:07

Цитата:

Сообщение от рони (Сообщение 481707)

j0hnik,
'$2-$1-$3' так надёжнее!

:) точно не поломается?

рони	28.03.2018 23:20

j0hnik,
проверено мин нет! :)

saldek

28.03.2018 23:24

Очень круто, господа!

Огромное спасибо, вопрос вами раскрыт полностью, премного благодарен. Разберу детально, впредь буду знать и это. Уважаемый j0hnik, в файрфокс 59.0.2 (64-бит) только ваш пример был во все цвета раскрашен, остальные - нет.
Конкретно этот пример

рони	28.03.2018 23:33

Цитата:

Сообщение от рони

~~проверено мин нет!~~

рони	28.03.2018 23:36

saldek,
'$2/$1/$3'

посмотрите примеры выше снова

saldek

28.03.2018 23:40

О да! Великолепно

Теперь и хром и файрфокс показывает всё в цвете абсолютно одинаково! А вот сравнивать детально почему буду уже с утра. Спасибо.

j0hnik

29.03.2018 03:25

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <span>29.03.2018</span><br>
  <span>30.03.2018</span><br>
  <span>31.03.2018</span><br>
  <span>01.04.2018</span><br>
  <span>02.04.2018</span><br>
  <span>03.04.2018</span><br>
  <span>04.04.2018</span><br>
  <script>
    var now = Date.now(),
    color = ['#F00','#F70','#D90','#AA0','#5D0','#0F0'];
    [].forEach.call(document.querySelectorAll('span'), function(el){
      date = Date.parse(el.textContent.replace(/(\d+)\.(\d+)\.(\d+)/, '$2/$1/$3'));
      var ost = (date - now)/86400000|0;
      ost = ost >= 5 ? 5 : ost<0 ? 0 : ost;
      el.style.color = color[ost];
    });
  </script>
</body>
</html>

поправил чутка для практичности

laimas

29.03.2018 04:49

Цитата:

Сообщение от рони

'$2-$1-$3' так надёжнее!

А разве в JS форматы YYYY-mm-dd и YYYY/mm/dd не разные данные возвращают, имеется ввиду Date.parse()?

рони	29.03.2018 08:28

laimas,
ранее было только так "месяц/день/год", сейчас многое зависит от настроек браузера или toLocaleString.
old
https://javascript.ru/Date.parse
new
https://learn.javascript.ru/datetime...�и-date-parse

запустите пост №2 в ie

saldek

29.03.2018 08:29

Спасибо j0hnik. Но ваш первый пример для меня более понятен, легче его изменять. В этом примере явно моих знаний пока не достаточно

laimas

29.03.2018 09:40

Цитата:

Сообщение от рони

ранее было только так "месяц/день/год", сейчас многое зависит от настроек браузера

Вот, и разница то может быть приличной. Это я спросил только потому, что о "надежнее" речь была. )

рони	29.03.2018 09:46

Цитата:

Сообщение от laimas

Это я спросил только потому, что о "надежнее" речь была.

и в чём ненадёжность если метод кросбраузерный, работает везде от старых Safari и ie до новых Firefox и Google Chrome?

saldek

29.03.2018 10:02

Доброе утро. Как правильно игнорировать год при сравнении с текущей датой? К примеру дата в формате 08 июнь 1969 сравнивается с текущей только по дню месяца и месяцу, год - игнорируется.
Заранее благодарю.

Dilettante_Pro

29.03.2018 10:10

А можно и без регулярок и parse

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <span>29.03.2018</span><br>
  <span>30.03.2018</span><br>
  <span>31.03.2018</span><br>
  <span>01.04.2018</span><br>
  <span>02.04.2018</span><br>
  <span>03.04.2018</span><br>
  <span>04.04.2018</span><br>
  <script>
    var now = Date.now(),
    color = ['#F00','#F70','#D90','#AA0','#5D0','#0F0'];
    [].forEach.call(document.querySelectorAll('span'), function(el){
       var comp = el.textContent.split('.');
      date = new Date(comp[2],comp[1] - 1,comp[0]);
      var ost = (date - now)/86400000|0;
      ost = ost >= 5 ? 5 : ost<0 ? 0 : ost;
      el.style.color = color[ost];
    });
  </script>
</body>
</html>

Dilettante_Pro

29.03.2018 10:14

saldek,
Можно сравнивать по компонентам даты - getDate, getMonth, getFullYear

saldek

29.03.2018 10:25

Спасибо, уважаемый Dilettante_Pro, сейчас буду изучать этот вопрос. заранее извиняюсь за столь возможно очевидные вопросы, начал изучать JS в 48 лет, уже не все так просто)

Часовой пояс GMT +3, время: 14:54.