jQuery jToday Plugin
http://jtoday.codeplex.com/
jQuery jToday Plugin
http://blog.donavon.com/2009/09/jquery-jtoday-plugin.html
jToday.js code:
// jToday a simple jQuery date display plugin by Donavon West // Copyright 2009 Donavon West. All rights reserved (function($, document) { //-------------------- $.fn.jToday = function(p_date) { var jTodayData = "jTodayData", div = "div", match, data, months = "Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec".split(" "); // ------------------------ // set the class and inner HTML function setStuff(p_el, p_class, p_str) { p_el.innerHTML = p_str; p_el.className = p_class + " " + p_class + p_str; } // ------------------------ //constructor code return this.each(function() { data = $.data(this, jTodayData); if (!data) { //only done once per element data = {}; //does innerHTML contain a date string? (i.e. YYYY-MM-DD) match = this.innerHTML.match(/^(\d\d\d\d)-(\d\d)-(\d\d)( |$|T)/); if (match) { data.date = new Date(match[1], parseInt(match[2],10)-1, match[3]); //yes, use it } else { data.date = p_date ? p_date : new Date(); //use the date passed in (or default to today) } //create the sub elements this.innerHTML = ""; data.yearEl = document.createElement(div); this.appendChild(data.yearEl); data.monthEl = document.createElement(div); this.appendChild(data.monthEl); data.dayEl = document.createElement(div); this.appendChild(data.dayEl); $.data(this, jTodayData, data); //save it for next time } else { data.date = p_date ? p_date : data.date; //use the date passed in (or the old value if undefined) } setStuff(data.yearEl, "year", data.date.getFullYear().toString() ); setStuff(data.monthEl, "month", months[data.date.getMonth()] ); setStuff(data.dayEl, "day", (data.date.getDate()).toString() ); }); }; //-------------------- })(jQuery, document); //minify trick, plus don't EVER assume that $ is the jQuery object. it's just bad
html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>jToday</title> <meta content="key" name="Geovin Du"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript" src="jToday.js"></script> <style type="text/css"> .jToday { position:relative; width:40px; height:38px; background-image:url(images/jTodayRed.png); overflow:hidden; text-align:center; } .jToday .year { display:none; } .jToday .month { font-weight:bold; color:#ffffff; font-size:14px; line-height:14px; } .jToday .day { font-weight:bold; color:#444444; line-height:22px; font-size:22px; } </style> <script type="text/javascript"> //FROM: http://blog.donavon.com/2009/09/jquery-jtoday-plugin.html //Geovin Du 涂聚文 缔友计算机信息技术有限公司 //2011-07-6 // //$(".jToday").jToday(); //$(".jToday").jToday(new Date(2009, 3, 27)); //November 19, 2010 </script> </head> <body> <div class="jToday"></div> <!-------jToday.js 显示样式--------> <div class="jToday">Sep 19 2011</div> <!-------CSS样式显示--------> <div class="jToday"> <div class="year">2011</div> <div class="month">Sep</div> <div class="day">24</div> </div> <!--2009-09-24 this will display Sep 24 --> </body> </html>
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文)