Question

here，您会看到我要使用的日期选择器。

单击next month时出错-如果达到december，则单击仍会更改日期，并且月份标题保持不变。

在那之后单击prev month-第一次单击具有相同的错误。

我尝试在1和11内使用13，if(currPage > 0)和if(currPage < 12)-没有成功。

有帮助吗？

Answer 1

检查是否就是您所期望的。您应该在此处设置<11，而不是<12。自从您达到第12个月（第11个索引）以来，您就可以再次触发函数并增加索引。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>MY DATEPICKER</title>
    	<script   src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript" > </script>

    	<style type="text/css">
    		
    	</style>
    <script type="text/javascript">
		var currPage = 0; //month
		var year ;
		var day;

		function getVal(e)
		{
			 //lert(document.getElementById(e.id).value);
			 day = document.getElementById(e.id).value;
			 document.getElementById("waha").value = year +"/"+  (currPage + 1)  + "/" + day ;
		}


		$(document).ready(function(){
			$("#waha").focus(function()
				{

					getDays(0);
					$("#datepicker").css("display"," block");
					
				}
				);


			$("#next-month").click(function(){
				if(currPage < 11)
				{
					currPage =  currPage+1;
					getDays(currPage);
				}

			});

			$("#prev-month").click(function(){

					if(currPage > 0)
					{
						currPage =  currPage-1;
						getDays(currPage);
					}
			});


			$("#next-y").click(function(){

				$("#year").text(  parseInt($("#year").text())  + 1   )  ;
				getDays(currPage);


			});


			$("#prev-y").click(function(){

			$("#year").text(  parseInt($("#year").text())  - 1   )  ;
					getDays(currPage);

			});			

			

			function getDays(month)
			{

				$("#dt-able").empty();
				var mos=['January','February','March','April','May','June','July','August','September','October','Novemeber','Decemeber']
				var day=['Sun', 'Mon', 'Tue', 'Wed' , 'Thu', 'Fri', 'Sat']
				year = parseInt($("#year").text());

				$("#month-title").html(mos[month]);

				$("#dt-able").append('<tr>');
				for(i = 0; i < 7; i++)
				{

					$('#dt-able').append("<td id='dt-head'>"  + day[i] + "</td>");
				}

				$("#dt-able").append('</td>');

				var firstDay = new Date(year,month, 1);
				var lastDay = new Date(year, month+1, 0);
				

		
				var offset = firstDay.getDay();

				var dayCount = 1;
				for (i = 0; i < 5; i++)
				{
					$('#dt-able').append("<tr id=row-"+ i +">");
					for(rw = 0; rw < 7; rw++ )
					{
						if(offset == 0)
						{

							$('#' + "row-"+ i).append("<td  id='"  + "cell-" + dayCount+ "'>"
							 +   "<input type='button' id ='day_val" +dayCount +"'"+   " onclick='getVal(this)' value= '" +  dayCount + "' >"  + 
							 	
							 '</td>' );
							

							if(dayCount >= lastDay.getDate())
							{
								break;
							}
							dayCount++;
						}else
						{
							$('#' + "row-"+ i).append('<td>' +'</td>' );
							 offset--;

						}

		


					}
					$('#dt-able').append('</tr>');

				}
			}


		});

		
    </script>
  </head>
  <body>

<input type="text" id="waha" >
<div id="datepicker" style="display:none">
<h4 id="month-title"></h4>
		<input type="button" name="prev-y" value="Prev Year"  id="prev-y" ">
			<span id="year">2017</span>	
		<input type="button" name="next-y" value="Next Year"  id="next-y" ">
	<table id="dt-able" >




<td class="day_val"> </td>


	</table>

	<input type="button" name="prev" value="Prev Mo"  id="prev-month" ">
	<input type="button" name="next" value="Next Mo"  id="next-month" ">
</div>
</body>
</html>

datepicker更改到达12月的日期

1 个答案: