Поиск Поддержать!
  2. Продвинутый калькулятор дат

Продвинутый калькулятор дат

«Онлайн-калькулятор дат для точных расчетов. Узнайте, сколько дней осталось до события, прибавьте к дате нужный интервал или определите день недели для любой даты. Просто введите даты — и получите результат мгновенно!»

Рассчитывайте разницы, добавляйте интервалы и определяйте дни недели.

Исходный код доступен в конце страницы.

Календарь

Июль 2024

Продвинутый калькулятор дат- это удобный инструмент для работы с датами, который поможет:

  • Рассчитать разницу между двумя датами (дни, недели, месяцы, годы).
  • Прибавить или вычесть дни, месяцы, годы к любой дате.
  • Определить день недели (например, узнать, на какой день выпадет ваш День рождения).
  • Визуально выбирать даты в компактном календаре.

Адаптивный дизайн — корректно отображается на телефонах и компьютерах.

Исходный код продвинутого калькулятора дат:

HTML:

  1. <div class="vifed-container">
  2.  
  3. 	<!-- Вкладки -->
  4. 	<div class="vifed-tabs">
  5. 		<button class="vifed-tab active" data-tab="difference">Разница между датами</button>
  6. 		<button class="vifed-tab" data-tab="add-subtract">Прибавить/вычесть</button>
  7. 		<button class="vifed-tab" data-tab="day-week">День недели</button>
  8. 	</div>
  9.  
  10. 	<!-- Блок "Разница между датами" -->
  11. 	<div class="vifed-tab-content active" id="difference">
  12. 		<div class="vifed-date-inputs">
  13. 			<div>
  14. 				<label for="vifed-start-date">Начальная дата:</label>
  15. 				<input type="date" id="vifed-start-date">
  16. 			</div>
  17. 			<div>
  18. 				<label for="vifed-end-date">Конечная дата:</label>
  19. 				<input type="date" id="vifed-end-date">
  20. 			</div>
  21. 		</div>
  22. 		<button class="vifed-calculate-btn" id="vifed-calculate-difference">Рассчитать</button>
  23. 		<div class="vifed-result" id="vifed-difference-result"></div>
  24. 	</div>
  25.  
  26. 	<!-- Блок "Прибавить/вычесть" -->
  27. 	<div class="vifed-tab-content" id="add-subtract">
  28. 		<div class="vifed-date-inputs">
  29. 			<div>
  30. 				<label for="vifed-base-date">Базовая дата:</label>
  31. 				<input type="date" id="vifed-base-date">
  32. 			</div>
  33. 			<div class="vifed-interval-controls">
  34. 				<div>
  35. 					<select id="vifed-operation">
  36. 						<option value="add">Прибавить</option>
  37. 						<option value="subtract">Вычесть</option>
  38. 					</select>
  39.  
  40. 				</div>
  41. 				<input type="number" id="vifed-days" min="0" placeholder="Дни">
  42. 				<input type="number" id="vifed-months" min="0" placeholder="Месяцы">
  43. 				<input type="number" id="vifed-years" min="0" placeholder="Годы">
  44. 			</div>
  45. 		</div>
  46. 		<button class="vifed-calculate-btn" id="vifed-calculate-add-subtract">Рассчитать</button>
  47. 		<div class="vifed-result" id="vifed-add-subtract-result"></div>
  48. 	</div>
  49.  
  50. 	<!-- Блок "День недели" -->
  51. 	<div class="vifed-tab-content" id="day-week">
  52. 		<div class="vifed-date-inputs">
  53. 			<div>
  54. 				<label for="vifed-check-date">Укажите дату:</label>
  55. 				<input type="date" id="vifed-check-date">
  56. 			</div>
  57. 		</div>
  58. 		<button class="vifed-calculate-btn" id="vifed-calculate-day">Определить</button>
  59. 		<div class="vifed-result" id="vifed-day-result"></div>
  60. 	</div>
  61.  
  62. 	<!-- Мини-календарь -->
  63. 	<div class="vifed-calendar">
  64. 		<h3>Календарь</h3>
  65. 		<div class="vifed-calendar-header">
  66. 			<button id="vifed-prev-month">&larr;</button>
  67. 			<span id="vifed-current-month-year">Июль 2024</span>
  68. 			<button id="vifed-next-month">&rarr;</button>
  69. 		</div>
  70. 		<div class="vifed-calendar-grid" id="vifed-calendar-grid"></div>
  71. 	</div>
  72. </div>

CSS:

  1. /* Основные стили */
  2.  .vifed - container {
  3.  	max - width: 800 px;
  4.  	margin: 0 auto;
  5.  	background: #ffffff;
  6.  	padding: 30 px;
  7.  	border - radius: 5 px;
  8.  	box - shadow: 0 5 px 15 px rgba(0, 0, 0, 0.1);
  9.  	font - family: 'Segoe UI', Tahoma, Geneva, Verdana, sans - serif;
  10.  }
  11.  .vifed - container h1 {
  12.  	color: #2c5364;
  13.     text-align: center;
  14.     margin-bottom: 20px;
  15. }
  16.  
  17. .vifed-description {
  18.     text-align: center;
  19.     margin-bottom: 30px;
  20.     color: # 666;
  21.  }
  22.  /* Вкладки */
  23.  .vifed - tabs {
  24.  	display: flex;
  25.  	gap: 5 px;
  26.  	margin - bottom: 20 px;
  27.  	border - bottom: 1 px solid# ddd;
  28.  }
  29.  .vifed - tab {
  30.  	padding: 10 px 15 px;
  31.  	background: #f8f9fa;
  32.  	border: none;
  33.  	border - radius: 5 px 5 px 0 0;
  34.  	cursor: pointer;
  35.  	transition: all 0.3 s;
  36.  }
  37.  .vifed - tab.active {
  38.  	background: #2c5364;
  39.     color: white;
  40. }
  41.  
  42. .vifed-tab:hover:not(.active) {
  43.     background: # e9ecef;
  44.  }
  45.  /* Контент вкладок */
  46.  .vifed - tab - content {
  47.  	display: none;
  48.  	padding: 20 px 0;
  49.  }
  50.  .vifed - tab - content.active {
  51.  	display: block;
  52.  }
  53.  /* Поля ввода дат */
  54.  .vifed - date - inputs {
  55.  	display: grid;
  56.  	grid - template - columns: 1 fr;
  57.  	gap: 15 px;
  58.  	margin - bottom: 20 px;
  59.  }
  60.  .vifed - date - inputs input[type = "date"] {
  61.  	padding: 10 px;
  62.  	border: 1 px solid# ddd;
  63.  	border - radius: 5 px;
  64.  	width: 100 % ;
  65.  }
  66.  .vifed - interval - controls {
  67.  	display: grid;
  68.  	grid - template - columns: 1 fr 1 fr;
  69.  	gap: 10 px;
  70.  }
  71.  .vifed - interval - controls input,
  72.  	.vifed - interval - controls select {
  73.  		padding: 10 px;
  74.  		border: 1 px solid# ddd;
  75.  		border - radius: 5 px;
  76.  		width: 100 % ;
  77.  	}
  78.  /* Кнопки */
  79.  .vifed - calculate - btn {
  80.  	display: block;
  81.  	width: 100 % ;
  82.  	padding: 12 px;
  83.  	background: #2c5364;
  84.     color: white;
  85.     border: none;
  86.     border-radius: 5px;
  87.     cursor: pointer;
  88.     font-size: 1.1rem;
  89.     transition: background 0.3s;
  90.     margin-bottom: 20px;
  91. }
  92.  
  93. .vifed-calculate-btn:hover {
  94.     background: # 3 a7bd5;
  95.  }
  96.  /* Результаты */
  97.  .vifed - result {
  98.  	padding: 15 px;
  99.  	background: #f8f9fa;
  100.  	border - radius: 5 px;
  101.  	font - size: 1.1 rem;
  102.  	text - align: center;
  103.  }
  104.  /* Календарь */
  105.  .vifed - calendar {
  106.  	margin - top: 30 px;
  107.  	border - top: 1 px solid# eee;
  108.  	padding - top: 20 px;
  109.  }
  110.  .vifed - calendar - header {
  111.  	display: flex;
  112.  	justify - content: space - between;
  113.  	align - items: center;
  114.  	margin - bottom: 15 px;
  115.  }
  116.  .vifed - calendar - header button {
  117.  	background: #2c5364;
  118.     color: white;
  119.     border: none;
  120.     border-radius: 5px;
  121.     padding: 5px 10px;
  122.     cursor: pointer;
  123. }
  124.  
  125. .vifed-calendar-grid {
  126.     display: grid;
  127.     grid-template-columns: repeat(7, 1fr);
  128.     gap: 5px;
  129. }
  130.  
  131. .vifed-calendar-day {
  132.     padding: 10px;
  133.     text-align: center;
  134.     border-radius: 5px;
  135.     background: # f8f9fa;
  136.  }
  137.  .vifed - calendar - day.selected {
  138.  		background: #2c5364;
  139.     color: white;
  140. }
  141.  
  142. .vifed-calendar-day.other-month {
  143.     opacity: 0.5;
  144. }
  145.  
  146. /* Адаптивность */
  147. @media (max-width: 600px) {
  148.     .vifed-container {
  149.         padding: 15px;
  150.     }
  151.  
  152.     .vifed-tabs {
  153.         flex-wrap: wrap;
  154.     }
  155.  
  156.     .vifed-interval-controls {
  157.         grid-template-columns: 1fr;
  158.     }
  159. }

JavaScript:

  1. // DOM элементы
  2. const tabs = document.querySelectorAll('.vifed-tab');
  3. const tabContents = document.querySelectorAll('.vifed-tab-content');
  4.  
  5. // Элементы для "Разницы между датами"
  6. const startDateInput = document.getElementById('vifed-start-date');
  7. const endDateInput = document.getElementById('vifed-end-date');
  8. const calculateDifferenceBtn = document.getElementById('vifed-calculate-difference');
  9. const differenceResult = document.getElementById('vifed-difference-result');
  10.  
  11. // Элементы для "Прибавить/вычесть"
  12. const baseDateInput = document.getElementById('vifed-base-date');
  13. const daysInput = document.getElementById('vifed-days');
  14. const monthsInput = document.getElementById('vifed-months');
  15. const yearsInput = document.getElementById('vifed-years');
  16. const operationSelect = document.getElementById('vifed-operation');
  17. const calculateAddSubtractBtn = document.getElementById('vifed-calculate-add-subtract');
  18. const addSubtractResult = document.getElementById('vifed-add-subtract-result');
  19.  
  20. // Элементы для "День недели"
  21. const checkDateInput = document.getElementById('vifed-check-date');
  22. const calculateDayBtn = document.getElementById('vifed-calculate-day');
  23. const dayResult = document.getElementById('vifed-day-result');
  24.  
  25. // Элементы календаря
  26. const prevMonthBtn = document.getElementById('vifed-prev-month');
  27. const nextMonthBtn = document.getElementById('vifed-next-month');
  28. const currentMonthYear = document.getElementById('vifed-current-month-year');
  29. const calendarGrid = document.getElementById('vifed-calendar-grid');
  30.  
  31. // Текущая дата для календаря
  32. let currentDate = new Date();
  33.  
  34. // Инициализация
  35. document.addEventListener('DOMContentLoaded', () => {
  36.     // Устанавливаем сегодняшнюю дату по умолчанию
  37.     const today = new Date().toISOString().split('T')[0];
  38.     startDateInput.value = today;
  39.     endDateInput.value = today;
  40.     baseDateInput.value = today;
  41.     checkDateInput.value = today;
  42.  
  43.     // Переключение вкладок
  44.     tabs.forEach(tab => {
  45.         tab.addEventListener('click', () => {
  46.             tabs.forEach(t => t.classList.remove('active'));
  47.             tabContents.forEach(c => c.classList.remove('active'));
  48.  
  49.             tab.classList.add('active');
  50.             document.getElementById(tab.dataset.tab).classList.add('active');
  51.         });
  52.     });
  53.  
  54.     // Обработчики кнопок
  55.     calculateDifferenceBtn.addEventListener('click', calculateDateDifference);
  56.     calculateAddSubtractBtn.addEventListener('click', calculateAddSubtract);
  57.     calculateDayBtn.addEventListener('click', calculateDayOfWeek);
  58.  
  59.     // Кнопки календаря
  60.     prevMonthBtn.addEventListener('click', () => {
  61.         currentDate.setMonth(currentDate.getMonth() - 1);
  62.         renderCalendar();
  63.     });
  64.  
  65.     nextMonthBtn.addEventListener('click', () => {
  66.         currentDate.setMonth(currentDate.getMonth() + 1);
  67.         renderCalendar();
  68.     });
  69.  
  70.     // Первоначальная отрисовка календаря
  71.     renderCalendar();
  72. });
  73.  
  74. // Расчет разницы между датами
  75. function calculateDateDifference() {
  76.     const startDate = new Date(startDateInput.value);
  77.     const endDate = new Date(endDateInput.value);
  78.  
  79.     if (startDate > endDate) {
  80.         differenceResult.textContent = 'Начальная дата должна быть раньше конечной!';
  81.         return;
  82.     }
  83.  
  84.     const diffTime = Math.abs(endDate - startDate);
  85.     const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
  86.     const diffWeeks = Math.floor(diffDays / 7);
  87.  
  88.     // Расчет месяцев и лет с учетом переполнений
  89.     let years = endDate.getFullYear() - startDate.getFullYear();
  90.     let months = endDate.getMonth() - startDate.getMonth();
  91.  
  92.     if (months < 0) {
  93.         years--;
  94.         months += 12;
  95.     }
  96.  
  97.     differenceResult.innerHTML = `
  98.         <strong>Результат:</strong><br>
  99.         Дней: ${diffDays}<br>
  100.         Недель: ${diffWeeks}<br>
  101.         Месяцев: ${months}<br>
  102.         Лет: ${years}
  103.     `;
  104. }
  105.  
  106. // Прибавление/вычитание интервала
  107. function calculateAddSubtract() {
  108.     const baseDate = new Date(baseDateInput.value);
  109.     const days = parseInt(daysInput.value) || 0;
  110.     const months = parseInt(monthsInput.value) || 0;
  111.     const years = parseInt(yearsInput.value) || 0;
  112.     const operation = operationSelect.value;
  113.  
  114.     const resultDate = new Date(baseDate);
  115.  
  116.     if (operation === 'add') {
  117.         resultDate.setDate(resultDate.getDate() + days);
  118.         resultDate.setMonth(resultDate.getMonth() + months);
  119.         resultDate.setFullYear(resultDate.getFullYear() + years);
  120.     } else {
  121.         resultDate.setDate(resultDate.getDate() - days);
  122.         resultDate.setMonth(resultDate.getMonth() - months);
  123.         resultDate.setFullYear(resultDate.getFullYear() - years);
  124.     }
  125.  
  126.     addSubtractResult.innerHTML = `
  127.         <strong>Новая дата:</strong><br>
  128.         ${resultDate.toLocaleDateString('ru-RU')}<br>
  129.         (${formatDayOfWeek(resultDate)})
  130.     `;
  131. }
  132.  
  133. // Определение дня недели
  134. function calculateDayOfWeek() {
  135.     const date = new Date(checkDateInput.value);
  136.     dayResult.textContent = `День недели: ${formatDayOfWeek(date)}`;
  137. }
  138.  
  139. // Форматирование дня недели
  140. function formatDayOfWeek(date) {
  141.     const days = ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'];
  142.     return days[date.getDay()];
  143. }
  144.  
  145. // Отрисовка календаря
  146. function renderCalendar() {
  147.     const year = currentDate.getFullYear();
  148.     const month = currentDate.getMonth();
  149.  
  150.     currentMonthYear.textContent = new Date(year, month, 1).toLocaleDateString('ru-RU', {
  151.         month: 'long',
  152.         year: 'numeric'
  153.     }).replace(' г.', '');
  154.  
  155.     const firstDay = new Date(year, month, 1).getDay();
  156.     const daysInMonth = new Date(year, month + 1, 0).getDate();
  157.     const daysInPrevMonth = new Date(year, month, 0).getDate();
  158.  
  159.     calendarGrid.innerHTML = '';
  160.  
  161.     // Дни недели (заголовки)
  162.     const weekDays = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
  163.     weekDays.forEach(day => {
  164.         const dayElement = document.createElement('div');
  165.         dayElement.className = 'vifed-calendar-day';
  166.         dayElement.textContent = day;
  167.         dayElement.style.fontWeight = 'bold';
  168.         calendarGrid.appendChild(dayElement);
  169.     });
  170.  
  171.     // Пустые ячейки перед первым днем месяца
  172.     for (let i = 0; i < (firstDay === 0 ? 6 : firstDay - 1); i++) {
  173.         const dayElement = document.createElement('div');
  174.         dayElement.className = 'vifed-calendar-day other-month';
  175.         dayElement.textContent = daysInPrevMonth - i;
  176.         calendarGrid.appendChild(dayElement);
  177.     }
  178.  
  179.     // Дни текущего месяца
  180.     const today = new Date();
  181.     for (let i = 1; i <= daysInMonth; i++) {
  182.         const dayElement = document.createElement('div');
  183.         dayElement.className = 'vifed-calendar-day';
  184.         dayElement.textContent = i;
  185.  
  186.         // Выделение сегодняшнего дня
  187.         if (i === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
  188.             dayElement.classList.add('selected');
  189.         }
  190.  
  191.         // Обработчик выбора даты
  192.         dayElement.addEventListener('click', () => {
  193.             document.querySelectorAll('.vifed-calendar-day').forEach(d => d.classList.remove('selected'));
  194.             dayElement.classList.add('selected');
  195.  
  196.             // Обновляем дату в активной вкладке
  197.             const selectedDate = new Date(year, month, i);
  198.             const dateString = selectedDate.toISOString().split('T')[0];
  199.  
  200.             if (document.querySelector('.vifed-tab-content.active').id === 'difference') {
  201.                 if (!startDateInput.value || endDateInput.value) {
  202.                     startDateInput.value = dateString;
  203.                 } else {
  204.                     endDateInput.value = dateString;
  205.                 }
  206.             } else if (document.querySelector('.vifed-tab-content.active').id === 'add-subtract') {
  207.                 baseDateInput.value = dateString;
  208.             } else {
  209.                 checkDateInput.value = dateString;
  210.             }
  211.         });
  212.  
  213.         calendarGrid.appendChild(dayElement);
  214.     }
  215.  
  216.     // Пустые ячейки после последнего дня месяца
  217.     const totalCells = Math.ceil((firstDay - 1 + daysInMonth) / 7) * 7;
  218.     for (let i = 1; i <= totalCells - (firstDay - 1 + daysInMonth); i++) {
  219.         const dayElement = document.createElement('div');
  220.         dayElement.className = 'vifed-calendar-day other-month';
  221.         dayElement.textContent = i;
  222.         calendarGrid.appendChild(dayElement);
  223.     }
  224. }
калькулятор датрасчет датразница между датамиприбавить к датевычесть из датыдень неделисколько дней между датамикалендарьпланированиедатавремясроки
Нет комментариев. Ваш будет первым!

© При копировании материалов ссылка на источник желательна!

Материалы, размещённые на сайте, носят рекомендательный характер.
Посещая этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.