date-fns#getYear JavaScript Examples

export default function CalendarNavigation({ locale, month, minimumDate, maximumDate, onMonthChange }) {
  const handlePrevious = event => {
    onMonthChange(startOfMonth(subMonths(month, 1)))
    event.preventDefault()
  }

  const handleNext = event => {
    onMonthChange(startOfMonth(addMonths(month, 1)))
    event.preventDefault()
  }

  return (
    <div className='nice-dates-navigation'>
      <a
        className={classNames('nice-dates-navigation_previous', {
          '-disabled': isSameMonth(month, minimumDate)
        })}
        onClick={handlePrevious}
        onTouchEnd={handlePrevious}
      />

      <span className='nice-dates-navigation_current'>
        {format(month, getYear(month) === getYear(new Date()) ? 'LLLL' : 'LLLL yyyy', { locale })}
      </span>

      <a
        className={classNames('nice-dates-navigation_next', {
          '-disabled': isSameMonth(month, maximumDate)
        })}
        onClick={handleNext}
        onTouchEnd={handleNext}
      />
    </div>
  )
}

dateFilters = [
  {
    label: 'Últimos 7 días',
    startAt: format(sub(today, { days: 7 }), 'yyyy-MM-dd'),
    endAt: todayFormat,
  },
  {
    label: 'Últimos 15 días',
    startAt: format(sub(today, { days: 15 }), 'yyyy-MM-dd'),
    endAt: todayFormat,
  },
  {
    label: 'Mes actual',
    startAt: format(new Date(getYear(today), getMonth(today), 1), 'yyyy-MM-dd'),
    endAt: todayFormat,
  },
  {
    label: 'Últimos 30 días',
    startAt: format(sub(today, { days: 30 }), 'yyyy-MM-dd'),
    endAt: todayFormat,
  },
  {
    label: 'Últimos 90 días',
    startAt: format(sub(today, { days: 90 }), 'yyyy-MM-dd'),
    endAt: todayFormat,
  },
  {
    label: 'Año actual',
    startAt: format(new Date(getYear(today), 1, 1), 'yyyy-MM-dd'),
    endAt: todayFormat,
  },
  {
    label: 'Último año',
    startAt: format(sub(today, { years: 1 }), 'yyyy-MM-dd'),
    endAt: todayFormat,
  },
  {
    label: 'Últimos dos años',
    startAt: format(sub(today, { years: 2 }), 'yyyy-MM-dd'),
    endAt: todayFormat,
  },
]

Footer = () => {
  return (
    <footer className={clsx('mt-auto py-2', styles.footer)}>
      <div className="container container-fluid px-2 lg:px-0">
        <div className="grid gap-4 grid-cols-1 mt-10 mb-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
          <div>
            <div className="flex items-center">
              <div className="rounded-full overflow-hidden inline-block">
                <img
                  src="/images/men.jpg"
                  alt="team"
                  loading="lazy"
                  width="60"
                  height="60"
                  className="object-cover"
                />
              </div>
              <div className="ml-3">
                <h4 className="font-semibold">TÔI YÊU LẬP TRÌNH</h4>
                <div className="text-gray-500">Code, cafe, book</div>
              </div>
            </div>
            <ul className="mt-6">
              <li>
                <InlineIcon
                  icon={home3Icon}
                  width="17"
                  className="mr-2 text-fresh-red"
                />
                Phú Nhuận, Hồ Chí Minh
              </li>
              <li className="mt-2">
                <InlineIcon
                  icon={globeAmericas}
                  width="17"
                  className="mr-2 text-fresh-red"
                />
                <a
                  href="https://12bay.vn"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:no-underline hover:text-fresh-red">
                  https://12bay.vn
                </a>
              </li>
              <li className="mt-2">
                <Icon
                  icon={mailIcon}
                  width="17"
                  className="mr-2 text-fresh-red"
                />
                <a
                  href="mailto:[email protected]"
                  className="hover:no-underline hover:text-fresh-red">
                  [email protected]
                </a>
              </li>
            </ul>
          </div>
          <div className={styles.group_link}>
            <h4 className="underline-title">Liên kết trang</h4>
            <ul>
              <li>
                <a href="/">Tympanus Codrops</a>
              </li>
              <li>
                <a href="/">Kipalog Blog</a>
              </li>
              <li>
                <a href="/">SitePoint</a>
              </li>
              <li>
                <a href="/">Creative Bloq</a>
              </li>
              <li>
                <a href="/">Techtalk</a>
              </li>
            </ul>
          </div>
          <div className={styles.group_link}>
            <h4 className="underline-title">Liên kết của tôi</h4>
            <ul>
              <li>
                <a
                  href="https://12bay.vn"
                  target="_blank"
                  rel="noopener noreferrer">
                  Săn vé máy bay
                </a>
              </li>
              <li>
                <a
                  href="https://github.com/nghiepit/botble-graphql-next"
                  target="_blank"
                  rel="noopener noreferrer">
                  Share source này
                </a>
              </li>
            </ul>
          </div>
          <div className={styles.group_link}>
            <h4 className="underline-title">Khác</h4>
            <div className="mt-5">
              <a href="/" className="inline-block bg-fresh-red px-2">
                Code
              </a>
              <a href="/" className="inline-block ml-2 bg-fresh-red px-2">
                Cafe
              </a>
              <a href="/" className="inline-block ml-2 bg-fresh-red px-2">
                Book
              </a>
            </div>
          </div>
        </div>
        <div className="mt-12 text-gray-500">
          © {getYear(new Date())} ToiYeuLapTrinh. All right reserved.
        </div>
      </div>
    </footer>
  );
}