Comment créer un calendrier en utilisant javascript

À mesure que les applications Web deviennent de plus en plus populaires, de nombreux développeurs doivent implémenter un calendrier dans leur site Web ou leur application pour permettre aux utilisateurs de sélectionner des dates. Il est facile de créer un calendrier simple mais puissant en utilisant JavaScript. Dans cet article, nous aborderons les étapes de base de la mise en œuvre d'un calendrier à l'aide de JavaScript et fournirons un exemple de code.

1. HTML Skeleton

Tout d'abord, nous avons besoin d'un framework HTML pour héberger notre calendrier. Nous devons créer un élément <div> 元素，并指定一个唯一的ID，以便我们可以通过JavaScript操作它。我们需要在这个 <div> qui contient deux zones de saisie et un bouton. Une zone de saisie est utilisée pour afficher la date sélectionnée et l'autre est utilisée pour recevoir la saisie de la nouvelle date.

2. Obtenir la date actuelle

En JavaScript, nous obtenons la date actuelle en utilisant l'objet Date. Nous pouvons obtenir la date du mois en cours en utilisant la méthode getDate() et obtenir l'année en cours en utilisant la méthode getFullYear().

3. Construire un calendrier

Ensuite, nous devons construire un calendrier. Nous pouvons créer un calendrier simple en utilisant un élément de table. Nous pouvons utiliser une boucle for pour générer des cellules de tableau contenant des dates. Une chose que nous devons noter est que le premier jour de chaque mois n'est pas nécessairement un dimanche, nous devons donc utiliser la valeur d'index de la première cellule pour déterminer à quelle date elle doit commencer.

4. Gestion de la sélection de date

Pour permettre à l'utilisateur de sélectionner une date, nous pouvons utiliser JavaScript pour écouter les événements de la zone de saisie afin de mettre à jour le calendrier lorsqu'une nouvelle date est sélectionnée. Nous pouvons utiliser des objets Date pour comparer deux dates et obtenir le nombre de jours qui les séparent. Si la date sélectionnée est supérieure à la date actuelle, nous pouvons faire défiler le calendrier vers l'avant, sinon nous pouvons faire défiler le calendrier vers l'arrière.

5. Ajouter une fonctionnalité de bouton

Enfin, nous devons ajouter une fonctionnalité au bouton déroulant pour afficher ou masquer le calendrier lorsque l'utilisateur clique sur le bouton. Nous pouvons masquer ou afficher le calendrier en utilisant des styles CSS, puis en ajoutant un écouteur d'événement sur le bouton pour basculer sa visibilité.

Certaines fonctionnalités supplémentaires incluent :

• Ajouter une classe pour mettre en évidence la date actuellement sélectionnée ainsi que la date survolée
• Différencier entre les week-ends et les jours de la semaine
• Résoudre les problèmes interannuels/mois

Exemple de code :

HTML :

<div id="calendar">
  <input type="text" id="selectedDate" placeholder="Select date">
  <input type="text" id="newDate" placeholder="Enter date">
  <button id="calBtn">V</button>
  <table id="calendarTable"></table>
</div>

CSS :

#calendar {
  position: relative;
}
#calendar input[type="text"] {
  padding: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
}
#calendar table {
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
  border-collapse: collapse;
}
#calendar td {
  padding: 5px;
  text-align: center;
  cursor: pointer;
}
#calendar .currentDay {
  background-color: #B6D9FA;
}
#calendar .hoverDay {
  background-color: #EAEAEA;
}
#calendar .weekend {
  color: red;
}

JavaScript :

var currentDate = new Date();
var selectedDate = document.getElementById('selectedDate');
var newDate = document.getElementById('newDate');
var calBtn = document.getElementById('calBtn');
var calendarTable = document.getElementById('calendarTable');

// Update selected date whenever the date input is changed
selectedDate.addEventListener('change', function() {
  currentDate = new Date(selectedDate.value);
  updateCalendar();
});

// Show/hide calendar when button is clicked
calBtn.addEventListener('click', function() {
  if (calendarTable.style.display === 'none') {
    calendarTable.style.display = 'table';
  } else {
    calendarTable.style.display = 'none';
  }
});

// Add event listeners for hovering over calendar dates
calendarTable.addEventListener('mouseover', function(e) {
  if (e.target.nodeName === 'TD' && e.target.innerHTML !== '') {
    e.target.classList.add('hoverDay');
  }
});

calendarTable.addEventListener('mouseout', function(e) {
  if (e.target.nodeName === 'TD' && e.target.innerHTML !== '') {
    e.target.classList.remove('hoverDay');
  }
});

// Generate calendar
function updateCalendar() {
  var currentMonth = currentDate.getMonth();
  var currentYear = currentDate.getFullYear();
  var daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
  var firstDayIndex = new Date(currentYear, currentMonth, 1).getDay();
  var lastDayIndex = new Date(currentYear, currentMonth, daysInMonth).getDay();
  var prevMonthDays = new Date(currentYear, currentMonth, 0).getDate();
  var calendarHtml = '';
  
  // Add table headings
  calendarHtml += '<tr><th colspan="7">' + getMonthName(currentMonth) + ' ' + currentYear + '</th></tr>'
  calendarHtml += '<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>';
  
  // Add days of previous month before the first day of current month
  var prevMonthDaysToAdd = firstDayIndex === 0 ? 6 : firstDayIndex - 1;
  var prevMonthStartDay = prevMonthDays - prevMonthDaysToAdd + 1;
  for (var i = 0; i < prevMonthDaysToAdd; i++) {
    calendarHtml += &#39;<td class="otherMonth">' + prevMonthStartDay + '</td>';
    prevMonthStartDay++;
  }
  
  // Add days of current month
  for (var i = 1; i <= daysInMonth; i++) {
    if (i === currentDate.getDate() && currentMonth === new Date().getMonth() && currentYear === new Date().getFullYear()) {
      calendarHtml += &#39;<td class="currentDay">' + i + '</td>';
    } else if (isWeekend(new Date(currentYear, currentMonth, i).getDay())) {
      calendarHtml += '<td class="weekend">' + i + '</td>';
    } else {
      calendarHtml += '<td>' + i + '</td>';
    }
    if (new Date(currentYear, currentMonth, i).getDay() === 6) {
      calendarHtml += '</tr><tr>';
    }
  }
  
  // Add days of next month after the last day of current month
  var nextMonthDaysToAdd = lastDayIndex === 0 ? 0 : 7 - lastDayIndex;
  for (var i = 1; i <= nextMonthDaysToAdd; i++) {
    calendarHtml += &#39;<td class="otherMonth">' + i + '</td>';
    if (lastDayIndex === 6 && i === nextMonthDaysToAdd) {
      break;
    }
  }
  
  // Append the calendar to the HTML
  calendarTable.innerHTML = calendarHtml;
}

// Get the name of the month from its numerical value
function getMonthName(month) {
  var monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
  ];
  return monthNames[month];
}

// Check if a day is a weekend day
function isWeekend(day) {
  return day === 0 || day === 6;
}

updateCalendar();

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!