年月选择框

一、jQuery扩展函数

$.fn.monthPicker = function() {
      var location = {
          windowTop: 0,
          windowLeft: 0,
          inputHeight: 0,
          currentYear:0,
          currentMonth:0,
      };
      var curentMonth = (new Date()).format("MM");
      var currentYear = (new Date()).format("yyyy");
      initialWindow();
      $(this).val(currentYear+"-"+curentMonth);
      $(this).click(function(){
          location.windowTop = $(this).offset().top;
          location.windowLeft = $(this).offset().left;
          location.inputHeight  = $(this).outerHeight();
          location.currentYear = $(this).val().split("-")[0];
          location.currentMonth = $(this).val().split("-")[1];
          $(this).addClass("hasMonthPicker");
          showWindow();
      });
      
      function initialWindow() {
          var html =  "<div id='DatepickerYM' style='display: none;'>"
              +"<div class='Cyear'>"
              +"<div class='preY'></div><span>"+currentYear+"</span><div class='nextY'></div>"
              +"</div>"
              +"<div class='Cmonth'>"
              +"<table>"
              +"<tbody>"
              +"<tr><td id='01'><a>1月</a></td><td id='02'><a>2月</a></td><td id='03'><a>3月</a></td></tr>"
              +"<tr><td id='04'><a>4月</a></td><td id='05'><a>5月</a></td><td id='06'><a>6月</a></td></tr>"
              +"<tr><td id='07'><a>7月</a></td><td id='08'><a>8月</a></td><td id='09'><a>9月</a></td></tr>"
              +"<tr><td id='10'><a>10月</a></td><td id='11'><a>11月</a></td><td id='12'><a>12月</a></td></tr>"
              +"</tbody>"
              +"</table>"
              +"</div>"
              +"</div>";
          var isWindow = $("#DatepickerYM").length;
          if(isWindow<=0){
              $("body").append(html);
          }
      }
      
      function showWindow() {
          $("#DatepickerYM .Cyear span").text(location.currentYear);
          $("#DatepickerYM .Cmonth table tbody td").each(function() {
              $(this).removeClass("select");
          });
          $("#DatepickerYM .Cmonth table tbody td").each(function() {
              if ($(this).attr("id") == location.currentMonth) {
                  $(this).addClass("select");
                  return;
              }
          });
          $("#DatepickerYM").css("left",location.windowLeft+"px");
          $("#DatepickerYM").css("top",(location.windowTop+location.inputHeight)+"px");
          $("#DatepickerYM").fadeIn();
      }
      //区域外点击隐藏
      $(".monthPicker,#DatepickerYM").click(function(event) {
          $(document).one("click", function() { //对document绑定一个影藏Div方法
              var dateSelect = $("#DatepickerYM .Cyear span").text() + "-";
              $("#DatepickerYM .Cmonth table tbody td").each(function() {
                  if ($(this).attr("class") == "select") {
                      dateSelect += $(this).attr("id");
                      return;
                  }
              });
              if ($(".monthPicker.hasMonthPicker").val() != dateSelect) {
                  $(".monthPicker.hasMonthPicker").val(dateSelect);
                  $(".monthPicker.hasMonthPicker").change();
              };
              $("#DatepickerYM").hide();
              $(".monthPicker").removeClass("hasMonthPicker");
          });
          event.stopPropagation(); //阻止事件冒泡到document
      });
      //选择年
      $("#DatepickerYM .Cyear .preY").click(function() {
          var Cyear = Number($("#DatepickerYM .Cyear span").text());
          if (Cyear == 2010) {
              Cyear--;
              $("#DatepickerYM .Cyear span").text(Cyear);
              $(this).css("visibility", "hidden");
              return;
          } else {
              $(this).css("visibility", "visible");
              $("#DatepickerYM .Cyear .nextY").css("visibility", "visible");
              Cyear--;
              $("#DatepickerYM .Cyear span").text(Cyear);
          }
      });
      $("#DatepickerYM .Cyear .nextY").click(function() {
          var Cyear = Number($("#DatepickerYM .Cyear span").text());
          var currentyear = Number(currentYear);
          if (Cyear == currentyear - 1) {
              Cyear++;
              $("#DatepickerYM .Cyear span").text(Cyear);
              $(this).css("visibility", "hidden");
              return;
          } else {
              $(this).css("visibility", "visible");
              $("#DatepickerYM .Cyear .preY").css("visibility", "visible");
              Cyear++;
              $("#DatepickerYM .Cyear span").text(Cyear);
          }
      });
      //选择月
      $("#DatepickerYM .Cmonth table tbody td").click(function() {
          $("#DatepickerYM .Cmonth table tbody td").each(function() {
              $(this).removeClass("select");
          });
          $(this).addClass("select");
          var dateSelect = $("#DatepickerYM .Cyear span").text() + "-";
          $("#DatepickerYM .Cmonth table tbody td").each(function() {
              if ($(this).attr("class") == "select") {
                  dateSelect += $(this).attr("id");
                  return;
              }
          });
          $(".monthPicker.hasMonthPicker").val(dateSelect);
          $(".monthPicker.hasMonthPicker").change();
          $(".monthPicker").removeClass("hasMonthPicker");
          $("#DatepickerYM").hide();
      });
  };

二、HTML页面内使用

<input type="text" class="monthPicker" id="monthData" readonly>
<script type="text/javascript">
   $(".monthPicker").monthPicker({})
</script>

 

转载于:https://my.oschina.net/u/3481089/blog/898402