隨著網路應用程式越來越流行,許多開發人員都需要在自己的網站或應用程式中實作一個日曆來允許使用者選擇日期。使用JavaScript可以輕鬆製作一個簡單但功能強大的日曆。在本文中,我們將介紹使用JavaScript實作日曆的基本步驟,並提供一個範例程式碼。
首先,我們需要一個HTML框架來承載我們的行事曆。我們需要建立一個 在JavaScript中,我們透過使用Date物件來取得目前日期。我們可以使用getDate()方法來取得目前月份的日期,並使用getFullYear()方法取得目前年份。 接下來,我們需要建立一個行事曆。我們可以使用一個table元素來建立一個簡單的行事曆。我們可以使用for迴圈來產生包含日期的表格儲存格。我們需要注意的一點是,每個月的第一天不一定是星期日,因此我們需要使用第一個單元格的index值來確定應該從哪個日期開始。 為了允許使用者選擇日期,我們可以使用JavaScript監聽輸入框的事件,以便在新日期選定時更新日曆。我們可以使用Date物件來比較兩個日期,並獲得它們之間的天數。如果選定的日期大於目前日期,則我們可以向前捲動日曆,否則我們可以向後捲動日曆。 最後,我們需要為下拉按鈕新增功能,以便在使用者點擊按鈕時顯示或隱藏行事曆。我們可以透過使用CSS樣式來隱藏或顯示日曆,然後在按鈕上新增事件監聽器來切換其可見性。 一些額外的功能包括: 程式碼範例: HTML: CSS: JavaScript: 以上是用javascript怎麼製作日曆的詳細內容。更多資訊請關注PHP中文網其他相關文章!
#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;
}
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 += '
'
calendarHtml += '' + getMonthName(currentMonth) + ' ' + currentYear + ' ';
// 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 += 'Sun Mon Tue Wed Thu Fri Sat ' + prevMonthStartDay + ' ';
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 += '' + i + ' ';
} else if (isWeekend(new Date(currentYear, currentMonth, i).getDay())) {
calendarHtml += '' + i + ' ';
} else {
calendarHtml += '' + i + ' ';
}
if (new Date(currentYear, currentMonth, i).getDay() === 6) {
calendarHtml += '';
}
}
// 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 += ' ' + i + ' ';
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();