js实现年周组件
来源：互联网 发布：php 汉字验证码 编辑：程序博客网 时间：2024/06/07 17:14
这是自己的第一篇博文，记录一下自己在项目中扩展的一个年周组件。
先上图看看效果：
此组件是参考一个网友的年月组件扩展出来的。通过年动态生成周。
下边贴出源代码：
html用法：
周:<input type="text" class="ywcalendar" style="width:120px;height:20px;"></input>源码：
/** * 年周选择插件 * 2014-07-18 */(function($) { $.fn.ywcalendar = function(options, param) { if (typeof options == 'string') { return $.fn.ywcalendar.methods[options](this, param); } options = options || {}; return this.each(function() { var target = $(this); var state = $.data(this, 'ywcalendar'); if (state) { $.extend(state.options, options); } else { $.data(this, 'ywcalendar', { options: $.extend({}, $.fn.ywcalendar.defaults, { disabled: (target.attr('disabled') ? true : false), onchange: target[0].onchange }, options) }); target[0].onchange = null; target.removeAttr('disabled'); } create(target); }); }; $.fn.ywcalendar.defaults = { disabled: false }; $.fn.ywcalendar.methods = { enable: function(jq) { return jq.each(function() { setDisabled(this, false); }); }, disable: function(jq) { return jq.each(function() { setDisabled(this, true); }); } }; function create(target) { var state = $.data(target[0], 'ywcalendar'); //注册keydown方法 target.keydown(function() { return false; }); //注册click方法 target.click(function() { var year; var flag = true; var ywcalendar = $("<div class='ywcalendar-Div' style='left:" + target.offset().left + "px;top:" + (target.offset().top + target.height() + 4) + "px;width:270px;'></div>"); var tab = $("<table id='yw_table'></table>"); var tr = $("<tr></tr>"); var td = $("<td class='ywcalendar-text'><<</td>"); td.mousedown(function() { flag = false; var lastYear = parseInt(year.attr("year")) - 1; year.attr("year", lastYear); year.html(year.attr("year") + "年"); if (getNumOfWeeks(lastYear+"-12-28") == 53) { $("#yw_table").children().children().children().last().text(53); } else { $("#yw_table").children().children().children().last().removeClass("ywcalendar-selected").text(""); } }); td.mouseup(function() { flag = true; target[0].focus(); }); tr.append(td); var y = new Date().getFullYear(); y = target.val() != "" ? target.val().split("-")[0] : y; year = $("<td class='ywcalendar-text' year='" + y + "' colspan='7'>" + y + "年</td>"); tr.append(year); td = $("<td class='ywcalendar-text'>>></td>"); td.mousedown(function() { flag = false; var nextYear = parseInt(year.attr("year")) + 1; year.attr("year", nextYear); year.html(year.attr("year") + "年"); //判断当前选择年份是否有53周 if (getNumOfWeeks(nextYear+"-12-28") == 53) { $("#yw_table").children().children().children().last().text(53); } else { $("#yw_table").children().children().children().last().removeClass("ywcalendar-selected").text(""); } }); td.mouseup(function() { flag = true; target[0].focus(); }); tr.append(td); tab.append(tr); var m = target.val() != "" ? Number(target.val().split("-")[1]) : 0; for (var i = 0; i < 53; i++) { if (i % 9 == 0) { tr = $("<tr></tr>"); tab.append(tr); } var cls; if (m == i + 1) cls = "ywcalendar-selected"; else cls = "ywcalendar-text"; //判断当前选择年份是否有53周 if (i == 52 && getNumOfWeeks(parseInt(year.attr("year"))+"-12-28") == 52) { td = $("<td class='" + cls + "'>" + "" + "</td>"); } else { td = $("<td class='" + cls + "'>" + (i + 1) + "</td>"); } td.mousedown(function(e) { var week = $(this).html().replace("", ""); //获取当前年份和年月然后判断其选择年月是否大于当前年月 var currYear = new Date().getFullYear(); var currWeek =getNumOfWeeks(getNowFormatDate()); if (parseInt(year.attr("year")) > parseInt(currYear)) { e.preventDefault(); } else if (parseInt(year.attr("year")) == parseInt(currYear) && parseInt(week) >parseInt(currWeek)) { e.preventDefault(); } else { week = week.length == 1 ? "0" + week : week; var newval = year.attr("year") + week; if (target.val() != newval) { target.val(year.attr("year").replace("-", "") + "-" + week); if (state.options.onchange) state.options.onchange(); } } }); tr.append(td); } ywcalendar.append(tab); tab.children().find("td").mouseover(function() { var cls = $(this).attr("class"); $(this).removeAttr("class"); if (cls.indexOf("selected") > 0) $(this).addClass("ywcalendar-selected-over"); else $(this).addClass("ywcalendar-text-over"); }); tab.children().find("td").mouseout(function() { var cls = $(this).attr("class"); $(this).removeAttr("class"); if (cls.indexOf("selected") > 0) $(this).addClass("ywcalendar-selected"); else $(this).addClass("ywcalendar-text"); }); year.unbind("mouseover"); year.unbind("mouseout"); $(document.body).append(ywcalendar); target.attr("box", ywcalendar); target.blur(function() { if (flag) { ywcalendar.remove(); target.attr("box", null); } }); }); if (state.options.disabled && !target.attr('disabled')) { setDisabled(target[0], true); } else if (!state.options.disabled && target.attr('disabled')) { setDisabled(target[0], false); } } function setDisabled(target, disabled) { var state = $.data(target, 'ywcalendar'); if (disabled) { state.options.disabled = true; if (target.onclick) { state.onclick = target.onclick; target.onclick = null; } $(target).attr('disabled', true); } else { state.options.disabled = false; if (state.onclick) { target.onclick = state.onclick; } $(target).attr('disabled', false); } return false; }})(jQuery);$(function() { $(".ywcalendar").ywcalendar();});/** * 取当前日期周 * //每年的12-28号一定是在最后一周；所以取最后一周就取每年的12-28号 * */function getNumOfWeeks(date) { var ddate = new Date(date.substr(0, 4), date.substr(5, 2) - 1, date.substr(8, 2)); var time, checkDate = new Date(ddate.getTime()); // Find Thursday of this week starting on Monday checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7)); time = checkDate.getTime(); checkDate.setMonth(0); // Compare with Jan 1 checkDate.setDate(1); return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;}/** * 获取当前格式化后的时间字符串(xxxx-xx-xx) * */function getNowFormatDate() { var day = new Date(); var Year = 0; var Month = 0; var Day = 0; var CurrentDate = ""; //初始化时间 //Year= day.getYear();//有火狐下2008年显示108的bug Year = day.getFullYear();//ie火狐下都可以 Month = day.getMonth() + 1; Day = day.getDate(); CurrentDate += Year + "-"; if (Month >= 10) { CurrentDate += Month + "-"; } else { CurrentDate += "0" + Month + "-"; } if (Day >= 10) { CurrentDate += Day; } else { CurrentDate += "0" + Day; } return CurrentDate;}
0 0
- js实现年周组件
- js实现年月组件
- 简单js组件、库实现
- 利用js实现的日期组件toolbar
- 用纯js实现悬浮按钮组件
- vue.js 组件实现简单分页效果
- pubsub-js 实现RN组件间通信
- js组件：radio组件
- js组件
- 利用JS实现：页面组件的动态显示、隐藏
- js实现一点击组件滚动条到最下面
- js实现的分页组件 简单可以扩展
- JS组件dtree轻松实现树型菜单
- js实现一点击组件滚动条到最下面
- JS组件dtree轻松实现树型菜单
- android通过webview组件实现与js相互调用
- js实现通用的微信分享组件示例
- 利用js、jQuery和css实现环形进度条组件封装
- scrapy-redis实现爬虫分布式爬取分析与实现
- unity中读取xml文件
- 366 D的小L
- 33.手势识别器
- gdb调试介绍（2）
- js实现年周组件
- 数据结构——哈希表（散列表）
- 399 整除个数
- 如何使用Cocoa来写XML文件和读XML文件［部分属于转载］
- 通过Afaria MDM服务器禁止iOS设备使用某些指定WiFi网络
- JS
- 杭电 1029 Ignatius and the Princess IV （技巧数学题）
- 二战时日本南方军热带岛屿野战生存
- 399 整除个数
