JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8">
		
		<script>
			var chnDay = ["日", "一", "二", "三", "四", "五", "六"];
			var lastDate = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
			var t = new Date();
			var y = t.getFullYear();
			var m = t.getMonth();	// 由getMonth()得到的值是0~11
			var d1 = t.getDate();
			var d2 = t.getDay();
			
			// 程式一開始執行就先判斷若為閏年就要將二月份的lastDat[1]設定為29天
			if ( ( y%4==0 && y%100!=0 ) || (y%400==0) ) lastDate[1]=29;

			function displayCalender(i)
			{
			 d1 += i;
			 d2 = (d2 + i + 7) % 7;
			 
			 if ( d1 >0 && d1 <= 28 )
			    {
				 ;
			    }
			 else
				{
				 if ( d1>lastDate[m] )
				    {
					 d1 = d1 % lastDate[m];	// 注意d1與m這兩行順序不能顛倒
					 m = (m+1) % 12;
					 if ( m==0 ) 
						{
						 y += 1;
						 // 年份有變動當然就要再判斷是否為閏年而將二月份的lastDat[1]設定為29天
						 if ( ( y%4==0 && y%100!=0 ) || (y%400==0) ) lastDate[1]=29;
						 else lastDate[1]=28;
						}				
				    }
				 else if ( d1<1 ) 
				    {
					 m = (m-1+12) % 12;	// 注意m與d1這兩行順序不能顛倒	
					 d1 = lastDate[m];
					 if ( m==11 ) 
						{
						 y -= 1;
						 // 年份有變動當然就要再判斷是否為閏年而將二月份的lastDat[1]設定為29天
						 if ( ( y%4==0 && y%100!=0 ) || (y%400==0) ) lastDate[1]=29;
						 else lastDate[1]=28;
						}				
				    }
				 else 
				    {
					 ;
					}
				}
				
			 var m1 = m+1; // 不直接使用變數m來顯示, 而是準備另一個變數m1來做顯示之用
			 var s = '<h2 align="center">' + y + '年' + m1 + '月</h2>';
			 s += '<h1 align="center">' + d1 + '</h1>';
			 s += '<h3 align="center">星期' + chnDay[d2] + '</h3>';
			 document.getElementById("showCalender").innerHTML = s;
			}
		</script>
	</head>
	<body>
		<div id="showCalender"></div>
		<script>displayCalender(0)</script>
		<a href="javascript:displayCalender(-1)" style="float:left;">前一天</a>
		<a href="javascript:displayCalender(1)" style="float:right;">後一天</a>
	</body>
</html>