jQuery jToday Plugin

松骏俊

2023-12-01

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>

更多专业前端知识，请上【猿2048】www.mk2048.com

jQuery jToday Plugin

相关阅读

相关文章

相关问答