尝试创建自己的“今日”按钮，如以下示例所示：Bootstrap Calendar。
但是，我无法复制相同的结果。如果已选择“上一个月”按钮或“下一个月”按钮，我试图保持计数并将计数传递给我的重置按钮。但是，一旦返回到当前月份，我将无法重置计数。
还是有更好的方法返回到当前月份？
如果这不是一个可接受的问题，请告诉我，我将调整我的问题或将其删除。
谢谢。
$(document).ready(function(){
var CURRENT_DATE = new Date();
var d = new Date();
var count = 0;
var content = 'January February March April May June July August September October November December'.split(' ');
var weekDayName = 'SUN MON TUES WED THURS FRI'.split(' ');
var daysOfMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// Returns the day of week which month starts (eg 0 for Sunday, 1 for Monday, etc.)
function getCalendarStart(dayOfWeek, currentDate) {
var date = currentDate - 1;
var startOffset = (date % 7) - dayOfWeek;
if (startOffset > 0) {
startOffset -= 7;
}
return Math.abs(startOffset);
}
// Render Calendar
function renderCalendar(startDay, totalDays, currentDate) {
var currentRow = 1;
var currentDay = startDay;
var $table = $('table');
var $week = getCalendarRow();
var $day;
var $span;
for (var i = 1; i <= totalDays; i++) {
$day = $week.find('td').eq(currentDay);
$day.text(i);
if (i === currentDate) {
if( i <= '9'){
$day.addClass('today').append("<div class='circle1'><div style='position: relative; height: 56px;'> </div></div>");
}else if(i >= '10' && i < '20'){
$day.addClass('today').append("<div class='circle2'><div style='position: relative; height: 56px;'> </div></div>");
}else{
$day.addClass('today').append("<div class='circle3'><div style='position: relative; height: 56px;'> </div></div>");
}
}
if(i != currentDate){
$day.addClass('not-today' + i);
var dayHovered = $day;
if( i <= '9'){
dayHovered.hover(function(e){
var id = e.target.id;
$(this).append("<div class='circle4'><div style='position: relative; height: 56px;'> </div></div>").css("color","white");
}, function(){
$(this).find( "div" ).remove();
$(this).removeAttr("style");
});
}else if(i >= '10' && i < '20'){
dayHovered.hover(function(){
$(this).append("<div class='circle5'><div style='position: relative; height: 56px;'> </div></div>").css("color","white");
}, function(){
$(this).find( "div" ).remove();
$(this).removeAttr("style");
});
}else{
dayHovered.hover(function(){
$(this).append("<div class='circle6'><div style='position: relative; height: 56px;'> </div></div>").css("color","white");
}, function(){
$(this).find( "div" ).remove();
$(this).removeAttr("style");
});
}
}
// +1 next day until Saturday (6), then reset to Sunday (0)
currentDay = ++currentDay % 7;
// Generate new row when day is Saturday, but only if there are
// additional days to render
if (currentDay === 0 && (i + 1 <= totalDays)) {
$week = getCalendarRow();
currentRow++;
}
//Add Events on certain days
}
}
// Clear generated calendar
function clearCalendar() {
var $trs = $('tr').not(':eq(0)');
$trs.remove();
$('.month-year').empty();
}
// Generates table row used when rendering Calendar
function getCalendarRow() {
var $table = $('table');
var $tr = $('<tr/>');
for (var i = 0, len = 7; i < len; i++) {
$tr.append($('<td/>'));
}
$table.append($tr);
return $tr;
}
function myCalendar() {
var month = d.getUTCMonth();
var day = d.getUTCDay();
var year = d.getUTCFullYear();
var date = d.getUTCDate();
var totalDaysOfMonth = daysOfMonth[month];
var counter = 1;
var $h2 = $('<h2>');
$h2.text(content[month] + ' ' + year);
$h2.appendTo('.month-year');
var dateToHighlight = 0;
// Determine if Month && Year are current for Date Highlight
if (CURRENT_DATE.getUTCMonth() === month && CURRENT_DATE.getUTCFullYear() === year) {
dateToHighlight = date;
}
//Getting February Days Including The Leap Year
if (month === 1) {
if ((year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0)) {
totalDaysOfMonth = 29;
}
}
// Get Start Day
renderCalendar(getCalendarStart(day, date), totalDaysOfMonth, dateToHighlight);
//Today function
updateTodayButton();
};
//Today Button
function updateTodayButton(){
var day = d.getUTCDay(), month = d.getUTCMonth(), year = d.getUTCFullYear();
if (CURRENT_DATE.getUTCMonth() === month && CURRENT_DATE.getUTCDay() === day && CURRENT_DATE.getUTCFullYear() === year) {
$("#todayButton").prop('disabled',true).css({"cursor":"no-drop", "background-color":"white"});
}else{
$("#todayButton").prop('disabled',false).css({"cursor":"pointer", "background-color":"white"});
reset();
}
}
function reset(){
var x = d.getUTCMonth();
if (CURRENT_DATE.getUTCMonth() !== x){
}
}
function navigationHandler(dir) {
d.setUTCMonth(d.getUTCMonth() + dir);
clearCalendar();
myCalendar();
}
$(document).ready(function() {
// Bind Events
$('.prev-month').click(function() {
navigationHandler(-1);
});
$('.next-month').click(function() {
navigationHandler(1);
});
// Generate Calendar
myCalendar();
});
});* {
margin: 0;
padding: 0;
}
.container {
margin-top: 80px;
border: 1px solid lightgrey;
border-radius: 5px;
-webkit-box-shadow: -2px 2px 10px rgba(98, 150, 187, 1);
-moz-box-shadow: -2px 2px 10px rgba(98, 150, 187, 1);
box-shadow: -2px 2px 10px rgba(98, 150, 187, 1);
}
th {
height: 30px;
text-align: center;
font-weight: 700;
font-size: 20px;
background-color: #6296bb;
color: white;
}
td {
height: 100px;
text-align: right;
font-size: 16px;
}
.today {
/*background-color: gray;*/
color: white;
}
th:nth-of-type(7), td:nth-of-type(7) {
font-weight: bold;
}
th:nth-of-type(1), td:nth-of-type(1) {
font-weight: bold;
}
table tr:nth-child(odd) td{
background-color: ;
}
table tr:nth-child(even) td{
background-color: ;
}
.arrowRight{
float:right;
/*border: 1px solid #a7cb45;
margin-right: 10px;*/
width: 80px;
height: 42px;
/*-webkit-box-shadow: -2px 2px 10px rgba(98, 150, 187, 1);
-moz-box-shadow: -2px 2px 10px rgba(98, 150, 187, 1);
box-shadow: -2px 2px 10px rgba(98, 150, 187, 1);*/
}
.arrowLeft{
float:left;
/*border: 1px solid #a7cb45;
margin-left: 100px;*/
width: 80px;
height: 42px;
/*-webkit-box-shadow: 2px 2px 10px rgba(98, 150, 187, 1);
-moz-box-shadow: 2px 2px 10px rgba(98, 150, 187, 1);
box-shadow: 2px 2px 10px rgba(98, 150, 187, 1);*/
}
.fa-chevron-left, .fa-chevron-right{
color: #a7cb45;
text-align: center;
margin-top: 15px;
cursor: pointer;
text-shadow: 3px 3px 16px #6296bb;
}
.fa-chevron-left:hover, .fa-chevron-right:hover{
color: #f4f9fc;
}
/***********If there are Events***********/
.ring-container {
position: relative;
}
.circle {
width: 15px;
height: 15px;
background-color: #62bd19;
border-radius: 50%;
position: absolute;
top: 23px;
left: 23px;
}
.ringring {
border: 3px solid #62bd19;
-webkit-border-radius: 30px;
height: 25px;
width: 25px;
position: absolute;
left: 15px;
top: 15px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0
}
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
/**********************************************/
.circle1{
font-size: 15px;
margin: -5px;
min-width: 19px;
padding: 10px;
text-align: center;
width: 30px;
height: 30px;
margin-left: -20px;
background-color: #a7cb45;
/*opacity: .4;
*/border-radius: 50%;
float: right;
}
.circle2{
font-size: 15px;
margin: -5px;
min-width: 19px;
padding: 10px;
text-align: center;
width: 30px;
height: 30px;
margin-left: -23px;
background-color: #a7cb45;
/*opacity: .4;
*/border-radius: 50%;
float: right;
}
.circle3{
font-size: 15px;
margin: -5px;
min-width: 19px;
padding: 10px;
text-align: center;
width: 30px;
height: 30px;
margin-left: -24px;
background-color: #a7cb45;
/*opacity: .4;
*/border-radius: 50%;
float: right;
}
.circle4{
font-size: 15px;
margin: -5px;
min-width: 19px;
padding: 10px;
text-align: center;
width: 30px;
height: 30px;
margin-left: -20px;
background-color: lightgrey;
/*opacity: .4;
*/border-radius: 50%;
float: right;
}
.circle5 {
font-size: 15px;
margin: -5px;
min-width: 19px;
padding: 10px;
text-align: center;
width: 30px;
height: 30px;
margin-left: -23px;
background-color: lightgrey;
/*opacity: .4;
*/border-radius: 50%;
float: right;
}
.circle6 {
font-size: 15px;
margin: -5px;
min-width: 19px;
padding: 10px;
text-align: center;
width: 30px;
height: 30px;
margin-left: -24px;
background-color: lightgrey;
/*opacity: .4;
*/border-radius: 50%;
float: right;
}
#todayButton{
float: right;
margin-top: 25px;
/*margin-right: 50px;*/
padding: 1px 14px;
border: 1px solid #6296bb;
border-radius: 5px;
font-size: 18px;
text-shadow: 3px 3px 16px #6296bb;
/*cursor: pointer;*/
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<i class="prev-month fa fa-chevron-left fa-3x arrowLeft"></i> <i class="next-month fa fa-chevron-right fa-3x arrowRight"></i><button id="todayButton">Today</button>
<div class="month-year text-center" style="margin-bottom:22px"><h2></h2></div>
<table class="table table-bordered">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</table>
</div>
更新：
如果有人对此感兴趣，我可以进行以下操作：
$("#todayButton").click(function() {
var currentMonth = CURRENT_DATE.getMonth(), currentYear = CURRENT_DATE.getFullYear();
var monthOn = d.getMonth(), yearOn = d.getFullYear();
if(currentMonth === 0 || monthOn === 0){
currentMonth++;
monthOn++;
}
var numberOfMonths;
numberOfMonths = (yearOn - currentYear) * 12 + (monthOn - currentMonth);
navigationHandler(numberOfMonths * -1)
});