您的位置:首页 > Web前端 > JQuery

JS_jQuery插件_date_select

2011-02-23 14:11 337 查看
一朋友要用,找了半天也没找到,自己直接写一个。

// 插件代码
/* jQuery.date_select
* require: jQuery 1.4+
* HTML:
<span id="j_time_select">
<select></select>年
<select></select>月
<select></select>日
</span>
* eg: $("#j_time_select").date_select({
"year_from":2000,           // 开始年份
"year_to":2011,             // 结束年份
"set_date":"2011/2/19",     // 默认日期
"default_date": "Off"       // 默认设置开关 [On|Off]
});
*
* author     : Yan.Gf
* date       : 20110225
* email      : yangf332@gmail.com
*/

;(function($) {
$.fn.extend({
"date_select": function(options) {
var date = new Date();

var opt = $.extend({
year_from: 2000,
year_to: (date.getFullYear()) - 0,
set_date: date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate(),
default_date: "Off"
}, options);

var NUM_MONTH = 12;
var ARR_DAY = [31,28,31,30,31,30,31,31,30,31,30,31];

return this.each(function(){

var s_select = $(this).find("select");
// 找到三个select元素
var s_year  = s_select.eq(0);
var s_month = s_select.eq(1);
var s_day   = s_select.eq(2);
// 保存已选
var default_day;

function _init() {
// 插入年份
_insertData(s_year, opt.year_from, (opt.year_to - opt.year_from + 1));
// 插入月份
_insertData(s_month, 1, NUM_MONTH);
// 绑定事件
s_year.bind("change", _operDay);
s_month.bind("change", _operDay);
s_day.bind("change", changeEvent_day);
// 插入日
_operDay();
// 设置默认日期
_setDefault();
}

_init();

// 设置默认日期
function _setDefault() {
if (opt.default_date == "On") {
var d       = opt.set_date.split('/');
var d_year  = d[0];
var d_month = d[1];
var d_day   = d[2];
// 设置默认
s_year.attr("value", d_year);
s_month.attr("value", d_month);
s_day.attr("value", d_day);

default_day = d_day;
}
}

function changeEvent_day() {
default_day = $(this).attr("value");
}

// 处理日
function _operDay() {
var year = s_year.val();
var month = s_month.val();
var n;

n = _getDayByYearMonth(year, month);

if (s_day.find("option").length == n) return;
_insertData(s_day, 1, n);
// 设置日为已选,如果超出则设为当月最后一天
s_day.attr("value", default_day > n ? default_day = n : default_day );
}

// 通过年月得到当月天数
function _getDayByYearMonth(year, month) {
if (month == 2 && year % 4 == 0) {
return 29;
} else {
return ARR_DAY[month - 1];
}
}

// 对select插入数据
function _insertData(elem, from, n) {
var s = [];

elem.html("");
for (var i=0; i<n; i++) {
s.push("<option value="+ from +">"+ from +"</option>");
from ++;
}

elem.html(s.join(""));
}

})
}
})
})(jQuery);




* 20110321 - 记录已选的日期,改变年月时,日期不变;如果超出则设为当月最大值。

* 20110329 - 添加return this.each();支持类数组多元素操作
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: