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;
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>