在网页开发中，日历是一个非常常见的组件。无论是在线预订系统、日程安排工具，还是简单的日期选择器，日历功能都扮演着不可或缺的角色。传统的做法是直接集成第三方的插件，但这些插件往往功能过于复杂，导致加载慢，增加了不必要的开发负担。今天，我们就来分享一个简单的JS日历代码，让你在开发中轻松实现这一功能，提升用户体验。
为什么选择自定义JS日历代码？
性能优越：使用第三方插件虽然方便，但往往包含了大量额外的功能和样式，导致加载时间较长，影响页面性能。而自定义的JS代码只会包含你需要的功能，大大减少了不必要的负担。
高度可定制：每个项目的需求不同，使用第三方插件时，你可能无法完全满足项目需求。而使用JS自己编写的日历代码，你可以随时根据自己的需求进行调整和扩展。
简单易懂：对于大多数前端开发者来说，JS是非常熟悉的语言。通过JS来实现日历功能，可以加深对网页开发的理解，并且可以随时修改和维护。
JS简单日历的基本思路
一个简单的日历组件需要具备以下几个核心功能：
显示当前月份和年份：用户需要看到当前的日期，并能够根据需求查看其他月份的日期。
显示每个月的日期：将日期按周排列，每个月的天数不固定，因此要动态计算每个月的日期，并显示在日历中。
日期选择功能：用户点击某个日期时，可以选择该日期进行其他操作，比如设置提醒、选择时间等。
我们将用一段简洁的代码来实现这些功能，让你看到如何快速构建一个简单而实用的JS日历。
简单日历
</h3><h3>.calendar{</h3><h3>width:280px;</h3><h3>border:1pxsolid#ddd;</h3><h3>border-radius:5px;</h3><h3>margin:20pxauto;</h3><p>font-family:Arial,sans-serif;</p><h3>}</h3><h3>.calendar-header{</h3><h3>text-align:center;</h3><h3>padding:10px;</h3><p>background-color:#f4f4f4;</p><p>border-bottom:1pxsolid#ddd;</p><h3>}</h3><h3>.calendar-body{</h3><h3>display:grid;</h3><p>grid-template-columns:repeat(7,1fr);</p><h3>grid-gap:5px;</h3><h3>padding:10px;</h3><h3>}</h3><h3>.calendar-bodydiv{</h3><h3>padding:10px;</h3><h3>text-align:center;</h3><h3>cursor:pointer;</h3><h3>border-radius:5px;</h3><h3>}</h3><h3>.calendar-bodydiv:hover{</h3><p>background-color:#f0f0f0;</p><h3>}</h3><h3>
<
>
</h3><h3>//获取当前日期</h3><p>letcurrentDate=newDate();</p><h3>//显示当前的年月</h3><h3>functiondisplayMonth(){</h3><p>constmonthNames=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];</p><p>constmonthYear=document.getElementById("monthYear");</p><p>monthYear.textContent=`${monthNames[currentDate.getMonth()]}${currentDate.getFullYear()}`;</p><h3>generateCalendar();</h3><h3>}</h3><h3>//生成日历</h3><p>functiongenerateCalendar(){</p><p>constcalendarDays=document.getElementById("calendarDays");</p><p>calendarDays.innerHTML="";//清空现有日期</p><h3>//获取当前月的第一天和最后一天</h3><p>constfirstDay=newDate(currentDate.getFullYear(),currentDate.getMonth(),1);</p><p>constlastDay=newDate(currentDate.getFullYear(),currentDate.getMonth()+1,0);</p><h3>//获取该月的第一天是星期几</h3><p>conststartDay=firstDay.getDay();</p><h3>//获取该月的天数</h3><p>consttotalDays=lastDay.getDate();</p><h3>//生成星期几的标题</h3><p>constweekDays=["日","一","二","三","四","五","六"];</p><h3>weekDays.forEach(day=>{</h3><p>constdayElement=document.createElement("div");</p><p>dayElement.textContent=day;</p><p>calendarDays.appendChild(dayElement);</p><h3>});</h3><h3>//填充空白日期</h3><p>for(leti=0;i<startDay;i++){</p><p>constemptyElement=document.createElement("div");</p><p>calendarDays.appendChild(emptyElement);</p><h3>}</h3><h3>//填充实际的日期</h3><p>for(leti=1;i<=totalDays;i++){</p><p>constdateElement=document.createElement("div");</p><p>dateElement.textContent=i;</p><p>dateElement.onclick=()=>alert(`你选择了${i}号`);</p><p>calendarDays.appendChild(dateElement);</p><h3>}</h3><h3>}</h3><h3>//切换到上个月</h3><p>document.getElementById("prevMonth").onclick=()=>{</p><p>currentDate.setMonth(currentDate.getMonth()-1);</p><h3>displayMonth();</h3><h3>};</h3><h3>//切换到下个月</h3><p>document.getElementById("nextMonth").onclick=()=>{</p><p>currentDate.setMonth(currentDate.getMonth()+1);</p><h3>displayMonth();</h3><h3>};</h3><h3>//初始显示当前月份</h3><h3>displayMonth();</h3><h3>
代码解析：
HTML结构：我们通过简单的HTML结构来设置日历的界面，包括头部的月份显示和切换按钮，以及主体部分用来显示具体日期。
CSS样式：使用了一些基础的CSS来美化日历，包括边框、圆角、间距等。通过网格布局，确保每一列都能正确地显示星期几。
JavaScript逻辑：主要包括获取当前的日期、生成该月的日期并显示在页面上。我们还实现了前后切换月份的功能。
通过这段代码，我们就实现了一个简单而功能齐全的日历，用户可以方便地查看当前月份的日期，点击日期进行选择。我们将继续深入探讨如何在这个日历的基础上进行扩展和优化，让它更加符合实际的业务需求。
随着前端开发的不断发展，网页日历的功能和需求越来越复杂。虽然基础的JS日历已经能够满足一些简单需求，但对于实际项目中的多种情况，可能还需要更多的定制化功能。以下是几个常见的扩展功能，你可以在原有的基础上进一步完善和优化你的JS日历代码。
1.日期选择与高亮功能
在实际应用中，日历不仅仅是一个展示日期的工具。许多场景下，用户需要选择某些日期，并对选中的日期进行标记或者做一些操作。我们可以在上面的代码基础上，通过添加一个数组来保存选中的日期，并在页面上高亮显示。
修改JS代码中的generateCalendar函数，让它能够高亮显示用户选择的日期：
letselectedDates=[];//用于保存选中的日期
//生成日历时，检查日期是否被选中，并进行高亮显示
functiongenerateCalendar(){
constcalendarDays=document.getElementById("calendarDays");
calendarDays.innerHTML="";//清空现有日期
//生成星期几的标题
constweekDays=["日","一","二","三","四","五","六"];
weekDays.forEach(day=>{
constdayElement=document.createElement("div");
dayElement.textContent=day;
calendarDays.appendChild(dayElement);
});
//填充空白日期
conststartDay=newDate(currentDate.getFullYear(),currentDate.getMonth(),1).getDay();
for(leti=0;i
constemptyElement=document.createElement("div");
calendarDays.appendChild(emptyElement);
}
//填充实际的日期
consttotalDays=newDate(currentDate.getFullYear(),currentDate.getMonth()+1,0).getDate();
for(leti=1;i<=totalDays;i++){
constdateElement=document.createElement("div");
dateElement.textContent=i;
if(selectedDates.includes(i)){
dateElement.style.backgroundColor="#90ee90";//高亮已选日期
}
dateElement.onclick=()=>{
if(selectedDates.includes(i)){
selectedDates=selectedDates.filter(date=>date!==i);
}else{
selectedDates.push(i);
}
displayMonth();//重新渲染日历
};
calendarDays.appendChild(dateElement);
}
}
通过以上代码，我们添加了一个selectedDates数组来保存选中的日期，每次点击日期时，都会将该日期加入或移除选中列表，并高亮显示。
2.提供日期范围选择
对于某些需要选择日期范围的功能，例如预定酒店、选择会议时间等，用户可能需要选择一个起始日期和结束日期。为了实现这一点，我们可以在JS代码中进行扩展，允许用户选择开始和结束日期，并显示区间内的所有日期。
letstartDate=null;//用于记录选择的开始日期
letendDate=null;//用于记录选择的结束日期
//修改日期点击事件，支持日期范围选择
functiongenerateCalendar(){
constcalendarDays=document.getElementById("calendarDays");
calendarDays.innerHTML="";
//生成星期几的标题
constweekDays=["日","一","二","三","四","五","六"];
weekDays.forEach(day=>{
constdayElement=document.createElement("div");
dayElement.textContent=day;
calendarDays.appendChild(dayElement);
});
//填充空白日期
conststartDay=newDate(currentDate.getFullYear(),currentDate.getMonth(),1).getDay();
for(leti=0;i
constemptyElement=document.createElement("div");
calendarDays.appendChild(emptyElement);
}
//填充实际的日期
consttotalDays=newDate(currentDate.getFullYear(),currentDate.getMonth()+1,0).getDate();
for(leti=1;i<=totalDays;i++){
constdateElement=document.createElement("div");
dateElement.textContent=i;
//判断该日期是否在选中的日期范围内
if(startDate&&endDate&&i>=startDate&&i<=endDate){
dateElement.style.backgroundColor="#ADD8E6";//高亮显示选择的范围
}
dateElement.onclick=()=>{
if(!startDate){
startDate=i;
}elseif(!endDate){
endDate=i;
if(startDate>endDate){
[startDate,endDate]=[endDate,startDate];//确保起始日期小于结束日期
}
}else{
startDate=i;
endDate=null;
}
displayMonth();//重新渲染日历
};
calendarDays.appendChild(dateElement);
}
}
这段代码实现了日期范围选择功能，用户点击开始和结束日期后，范围内的所有日期都会被高亮显示。
