NazariyM
10/5/2017 - 6:07 PM

counter between dates

	&__counter-wrap
		max-width: 600px
		margin: 0 auto
		text-align: center
	&__counter-title
		color: $white
		+f('web700', 30)
	&__counter
		margin: 25px 0 0
		font-size: 0
		&-item
			display: inline-block
			vertical-align: top
			color: $white
			&:not(:first-child)
				margin-left: 16px
		&-digit
			margin-bottom: 10px
			font-size: 0
			span
				display: inline-block
				width: 47px
				height: 54px
				line-height: 51px
				border-radius: 5px
				border: 2px solid #ffffff
				background-color: rgba($blue-dark, .5)
				font-size: 38px
				&:not(:first-child)
					margin-left: 4px
		&-text
			+f('web400i', 15)
			
import moment from 'moment';

export function infoCounter() {

  const $counter = $('.js-info-counter');
  const initYear = $counter.data('init-year');
  const initMonth = $counter.data('init-month');
  const initDay = $counter.data('init-day');

  const $yearContainer = $counter.find('.js-info-counter-year');
  const $monthContainer = $counter.find('.js-info-counter-month');
  const $dayContainer = $counter.find('.js-info-counter-day');

  const now = moment();
  const initDate = moment([initYear, initMonth, initDay]);

  const diffDuration = moment.duration(now.diff(initDate));

  const year = diffDuration.years();
  const month = diffDuration.months();
  const day = diffDuration.days();

  const checkMonth = getLength(month);
  const checkDay = getLength(day);

  const yearDigitOne = $yearContainer.children().first();
  const yearDigitTwo = $yearContainer.children().last();
  const monthDigitOne = $monthContainer.children().first();
  const monthDigitTwo = $monthContainer.children().last();
  const dayDigitOne = $dayContainer.children().first();
  const dayDigitTwo = $dayContainer.children().last();

  let splittedDigit = splitNumb(year);

  yearDigitOne.text(splittedDigit[0]);
  yearDigitTwo.text(splittedDigit[1]);

  if (checkDay <= 1) {

    dayDigitOne.text('0');
    dayDigitTwo.text(`${day}`);

  } else {

    let splittedDigit = splitNumb(day);

    dayDigitOne.text(splittedDigit[0]);
    dayDigitTwo.text(splittedDigit[1]);

  }

  if (checkMonth <= 1) {

    monthDigitOne.text('0');
    monthDigitTwo.text(`${month}`);

  } else {

    let splittedDigit = splitNumb(month);

    monthDigitOne.text(splittedDigit[0]);
    monthDigitTwo.text(splittedDigit[1]);

  }

  function splitNumb(numb) {
    return numb.toString().split('');
  }

  function getLength(number) {
    return number.toString().length;
  }
}
+e.counter-wrap
			+e.counter-title Мы выплачиваем зарплату вовремя уже:
			+e.counter.js-info-counter(data-init-year='2005' data-init-month='7' data-init-day='6')
				+e.counter-item
					+e.counter-digit.js-info-counter-year
						+e.SPAN
						+e.SPAN
					+e.counter-text Лет
				+e.counter-item
					+e.counter-digit.js-info-counter-month
						+e.SPAN
						+e.SPAN
					+e.counter-text Месяцев
				+e.counter-item
					+e.counter-digit.js-info-counter-day
						+e.SPAN
						+e.SPAN
					+e.counter-text Дней