jQuery日历只显示几天

时间:2014-12-13 05:47:38

标签: jquery html calendar

我正在搜索一个日历,该日历仅在选择框上选择年份后显示几天,而在另一个选择框上显示月份。结果在两个单独的选择框中选择年份和月份之后,那个月的总天数。然后我可以从该结果中进行选择,即该月的总天数。但是在日历中没有显示任何周,它只显示几天。我可以在jQuery中使用满足此要求的示例。

1 个答案:

答案 0 :(得分:0)

这不是优化的代码,只是供您参考。希望这对你有所帮助。

$(document).ready(function(){
  var y, m, d;
  var date = new Date();
  var i;
  for (i = -5; i < 5; i ++) {
    $("#cal").append("<li class='yearPicker'>" + (date.getFullYear() + i) + "</li>");
  }
  
  $(".yearPicker").click(function(){
    y = $(this).html();
    $("#cal").html("");
    for (i = 0; i < 12; i ++) {
      $("#cal").append("<li class='monthPicker'>" + (i + 1) + "</li>");
    }
    
    $(".monthPicker").click(function(){
      m = $(this).html();
      $("#cal").html("");
      date = new Date(y, m - 1, 1)
      for (i = 0; i < 31; i ++) {
        if (date.getMonth() == m - 1) {
          $("#cal").append("<li class='dayPicker'>" + (i + 1) + "</li>");
        } else {
          break;
        }
        
        date.setTime(date.getTime() + (24 * 60 * 60 * 1000));
      }
      
      $(".dayPicker").click(function(){
        alert(y + "/" + m + "/" + $(this).html());
      });
    });
  });
});
ol {
  display: inline-block;
  list-style-type: none;
}

li {
  display: inline-block;
  width: 50px;
  border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol id="cal">
</ol>