В веб-разработке создание интерактивного средства выбора даты является распространенным требованием. Одной из важных функций является возможность изменить цвет выбранной даты при нажатии на нее. В этой статье мы рассмотрим различные методы достижения этого эффекта с использованием HTML, CSS и JavaScript. Мы предоставим примеры кода для каждого метода, которые помогут вам реализовать его в ваших проектах.

Метод 1: псевдоклассы CSS
Один из способов изменить цвет выбранной даты — использовать псевдоклассы CSS. Мы можем использовать псевдокласс :focusдля нацеливания на выбранную дату, когда она получает фокус. Вот пример:

.date-picker input[type="date"]:focus {
  background-color: #ff0000; /* Replace with your desired color */
}

Метод 2: прослушиватели событий JavaScript
Другой подход заключается в использовании прослушивателей событий JavaScript для определения момента щелчка по дате и соответствующего изменения ее стиля. Вот пример использования ванильного JavaScript:

var dateInputs = document.querySelectorAll('.date-picker input[type="date"]');
dateInputs.forEach(function(input) {
  input.addEventListener('input', function() {
    if (this.value) {
      this.style.backgroundColor = '#ff0000'; /* Replace with your desired color */
    } else {
      this.style.backgroundColor = ''; /* Reset the background color if date is cleared */
    }
  });
});

Метод 3: jQuery
Если вы используете jQuery в своем проекте, вы можете добиться желаемого эффекта с помощью следующего кода:

$('.date-picker input[type="date"]').on('input', function() {
  if (this.value) {
    $(this).css('background-color', '#ff0000'); /* Replace with your desired color */
  } else {
    $(this).css('background-color', ''); /* Reset the background color if date is cleared */
  }
});

Изменение цвета выбранной даты при нажатии повышает удобство использования средства выбора даты. В этой статье мы рассмотрели три различных метода достижения этого эффекта: использование псевдоклассов CSS, прослушивателей событий JavaScript и jQuery. Вы можете выбрать метод, который лучше всего соответствует требованиям вашего проекта, и реализовать его, используя предоставленные примеры кода.

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