JSFiddle - React, Tailwind, and code Playground

by Q4Dizzy

HTML

<h1><div class="web-time" data-hour="18" data-minutes="30"></div></h1>

CSS

.web-time {
	display: inline;
}

.web-time span {
	background-color: #ffd61e;
  color: #000;
	padding: .2rem .4rem;
  display: inline-block;
  line-height: 1;
  border-radius: 4px;
}

JavaScript

function updateDate(){
	var $webTimes = document.getElementsByClassName('web-time'),
			$currentDate = new Date(),
			$nextDay = new Date(new Date().setDate($currentDate.getDate() + 1)),
      $secondDay = new Date(new Date().setDate($currentDate.getDate() + 2)),
      $thirdDay = new Date(new Date().setDate($currentDate.getDate() + 3)),
			$currentNDate = $currentDate.getDate(),
			$currentMonth = $currentDate.getMonth(),
			$nextMonth = $nextDay.getMonth(),
      $secondDayMonth = $secondDay.getMonth(),
      $thirdDayMonth = $thirdDay.getMonth(),
			$hours = $currentDate.getHours(),
			$minutes = $currentDate.getMinutes(),
			$monthArray = [
				'января',
				'февраля',
				'марта',
				'апреля',
				'мая',
				'июня',
				'июля',
				'августа',
				'сентября',
				'октября',
				'ноября',
				'декабря'
			];
			
			console.log($currentDate)
			console.log(new Date($nextDay));
      console.log($nextMonth)

	if ($webTimes.length) {
		for(var i = 0; i < $webTimes.length; i++) {
			var $sHour = parseInt($webTimes[i].dataset.hour),
					$sMinutes = parseInt($webTimes[i].dataset.minutes),
					$tpl = '';

					if ($hours >= 18 && $minutes >= 0) {
						$tpl = $nextDay.getDate() + ' ' + $monthArray[$nextMonth] + ', '  + $secondDay.getDate() + ' ' + $monthArray[$secondDayMonth]  + ', '  + $thirdDay.getDate() + ' ' + $monthArray[$thirdDayMonth] + ' в ' + $sHour + ':' + ($sMinutes < 10 ? '0' : '') + $sMinutes;
					} else {
						$tpl = $currentNDate + ' ' + $monthArray[$currentMonth] + ', '  + $nextDay.getDate() + ' ' + $monthArray[$nextMonth]  + ', '  + $secondDay.getDate() + ' ' + $monthArray[$secondDayMonth] + ' в ' + $sHour + ':' + ($sMinutes < 10 ? '0' : '') + $sMinutes;
					}

					$webTimes[i].innerHTML = '<span>'+$tpl+'</span>';
		}
	}
}
updateDate();

setInterval(updateDate, 5000);