JS_jQuery插件_date_select

最新推荐文章于 2019-12-25 16:09:06 发布

原创最新推荐文章于 2019-12-25 16:09:06 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#date #jquery插件 #function #jquery #email #html

code box 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个基于jQuery的日期选择插件，支持自定义显示年、月、日，并提供了默认日期设置功能。该插件使用简单，只需在HTML中定义基本结构并调用相应方法即可实现日期的选择。

一朋友要用，找了半天也没找到，自己直接写一个。

// 插件代码 /* 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);