Maison > Article > interface Web > 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.
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.
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().
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.
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.
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 :
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 += '<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 += '<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 += '<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!