共享一个之前写的简单位的,选择年月的插件
SimpleCanleder.js
; (function($) {
$.simpleCanleder = function(box, options){
var _canlederBox = "#SimpleCanleder_Year_Month";
var _title_ul_li = ".title li";
box = $(box);
var box_height = parseFloat( box.height());
var box_width = parseFloat( box.width());
var boxOffset = box.offset();
var canlederBox = null;
box.click(function(){
canlederBox = $(_canlederBox);
if($(canlederBox).size() > 0){
$(canlederBox).show();
}else{
_buildCanlederBox();
$("body").append(canlederBox);
$(document).click(function(e){
var pointX = e.pageX;
var pointY = e.pageY;
var $box = canlederBox.data("box");
var isCanlederBox = $(e.target).parents(_canlederBox);
if(canlederBox.is(":visible") && $box && e.target != $box[0] && isCanlederBox.size() <= 0){
var offset = canlederBox.offset();
var top = offset.top - 4;
var left = offset.left - 4;
var height = top + parseFloat(canlederBox.outerHeight()) + 4;
var width = left + parseFloat(canlederBox.outerWidth()) + 4;
if(pointX > left && pointY > top &&
pointX < width && pointY < height){
}else{
canlederBox.hide();
}
}
});
}
canlederBox.css({"top" : boxOffset.top + box_height + 6, "left": boxOffset.left});
canlederBox.data("box", box);
_init();
});
function _init(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
if(box.val()){
year = box.val().split("-")[0] * 1;
month = box.val().split("-")[1] * 1;
}
canlederBox.find(_title_ul_li).eq(1).find("div.inner").html(_getSelect(year));
canlederBox.find(".body li").each(function(){
if($(this).text() == month){
$(this).addClass("cur");
}else{
$(this).removeClass("cur");
};
});
}
function _buildCanlederBox(){
canlederBox = $("<div/>");
canlederBox.attr("id", "SimpleCanleder_Year_Month");
_buildTitle(canlederBox);
_buildBody(canlederBox);
canlederBox.append($("<div/>").addClass("clear"));
_buildBottom(canlederBox);
};
function _buildTitle(canlederBox){
var $title = $("<div/>").addClass("title").append("<ul/>").appendTo(canlederBox);
var $title_ul = $title.find("ul");
for(var i = 0; i < 3; i++){
var $li = $("<li/>").append( $("<div/>").addClass("inner") );
$li.hover(function(){
$(this).addClass("over");
}, function(){
$(this).removeClass("over");
});
$title_ul.append($li);
}
var $title_ul_li = $title_ul.find("li");
$title_ul_li.eq(0).click(function(){
var year = $select.val(); //$select 在_getSelect()有定义
canlederBox.find(_title_ul_li).eq(1).find("div.inner").html(_getSelect(--year));
}).find("div.inner").text(" < ");
$title_ul_li.eq(1).addClass("middle").click(function(){
})
.find("div.inner").addClass("paddingTop").html(_getSelect());
$title_ul_li.eq(2).click(function(){
var year = $select.val(); //$select 在_getSelect()有定义
canlederBox.find(_title_ul_li).eq(1).find("div.inner").html(_getSelect(++year));
}).find("div.inner").text(" > ");
};
function _buildBody(canlederBox){
var $body = $("<div/>").addClass("body").append("<ul/>").appendTo(canlederBox);
var $body_ul = $body.find("ul");
for(var i = 0; i < 12; i++){
var $inner = $("<div/>").addClass("inner").text(i+1);
var $li = $("<li/>").append($inner).click(function(){
var year = canlederBox.find(_title_ul_li).eq(1).find("select").val();
var month = $(this).find("div.inner").text() * 1;
month = month < 10 ? "0" + month : month;
canlederBox.data("box").val(year + "-" + month);
canlederBox.hide();
});
$li.hover(function(){
$(this).addClass("over");
}, function(){
$(this).removeClass("over");
});
$body_ul.append($li);
}
};
function _buildBottom(canlederBox){
var $button_clear = $("<button/>").addClass("clear").click(function(){
canlederBox.data("box").val("");
canlederBox.hide();
}).text("清空");
var $bottom = $("<div/>").addClass("bottom").append($button_clear);
canlederBox.append($bottom);
};
var $select = null;
function _getSelect(year){
if(!year){
year = new Date().getFullYear();
}
$select = $("<select/>");
for(var i = 10; i >=0; i--){
$select.append($("<option/>").text(year - i ));
}
for(var i = 1; i <= 10; i++){
$select.append($("<option/>").text(year + i ));
}
$select.find("option").each(function(){
if($(this).text() == year){
$(this).attr("selected", "selected");
}
});
return $select;
};
};
$.fn.extend({
simpleCanleder: function(options) {
options = $.extend({},options);
this.each(function() {
new $.simpleCanleder(this, options);
});
return this;
}
});
})(jQuery);
SimpleCanleder.css
#SimpleCanleder_Year_Month *{margin:0px;padding:0px;}
#SimpleCanleder_Year_Month .clear{clear: both;}
#SimpleCanleder_Year_Month {width:140px; font-size:14px;line-height:14px; border:1px solid lavender; padding:10px; padding-top:5px;padding-right:5px; position:absolute; background-color:white;}
#SimpleCanleder_Year_Month .title{height:35px;}
#SimpleCanleder_Year_Month .title li.middle{width:65px; position:relative; overflow:visible;}
#SimpleCanleder_Year_Month .title li.middle select{margin-top:-3px}
#SimpleCanleder_Year_Month .title li.middle .year_list{width:100px; position:absolute; background-color:lightgrey; left:-20px}
#SimpleCanleder_Year_Month .title li.middle .year_list li {background-color:transparent; text-align:center; width:45px; height: 20px;}
#SimpleCanleder_Year_Month .title li.middle .year_list ul{clear: both;}
#SimpleCanleder_Year_Month .title li, #SimpleCanleder_Year_Month .body li{background-color:lavender;list-style:none; width:30px; height:30px; overflow:hidden; margin-top:5px;margin-right:5px; float:left; display:inline; cursor:pointer}
#SimpleCanleder_Year_Month .title li.cur, #SimpleCanleder_Year_Month .body li.cur{background-color:tomato;}
#SimpleCanleder_Year_Month .title li.over, #SimpleCanleder_Year_Month .body li.over{background-color:lightblue;}
#SimpleCanleder_Year_Month .title li .inner, #SimpleCanleder_Year_Month .body li .inner{padding-top:8px; text-align:center;}
#SimpleCanleder_Year_Month .bottom{ height: 16px; padding-top: 5px; text-align: center }
#SimpleCanleder_Year_Month .bottom button.clear{ background-color: gainsboro; border: 1px solid; font-size: 12px;}
年月历201301index.html
<body>
<input class="test" value="" style="paddind-top: 100px; padding-left:100px;"/>
<input class="test" value="" style="margin-top :100px; margin-left:100px;"/>
</body>
<script>
$(".test").simpleCanleder();
</script>