一、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>