simple jQuery date-picker plugin 使用
袁波
simple jQuery date-picker plugin
是一款很方便使用的插件日历控件，样式简单，功能强大。现在就说一下在rails 3中使用。
它一共有三个部分，一是jquery 框架，二是就本身cal.js文件，最后一个是样式文件calendar.css.还有页面上jquery代码
<SCRIPT type=text/javascript>
jQuery(document).ready(function () {
$('input.one').simpleDatepicker();
$('input.two').simpleDatepicker({ startdate: 2008, enddate: 2012 });//时间从 2008--2012
$('input.three').simpleDatepicker({ chosendate: '9/9/2010', startdate: '6/10/2008', enddate: '7/20/2011' });
$('input.four').simpleDatepicker({ x: 45, y: 3 });
});
</SCRIPT>
从上面的代码中得到，它由input html控件来触发。
以下html页面代码且input 类型为text来使用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0039)http://teddevito.com/demos/calendar.php -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>simple jQuery date-picker plugin</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<META name=description
content="a simple date-picker built with the jquery library. this is NOT an everything-under-the-kitchen-sink date picker">
<META name=keywords
content=datepicker,date-picker,jquery,jqueryplugin,calendar><LINK rel=stylesheet
type=text/css href="simple%20jQuery%20date-picker%20plugin_files/calendar.css">
<STYLE type=text/css>P {
FONT: 12px/1.3em Arial, Helvetica, sans-serif
}
UL {
FONT: 12px/1.3em Arial, Helvetica, sans-serif
}
UL LI {
FONT: 12px/1.3em Arial, Helvetica, sans-serif
}
BODY {
PADDING-BOTTOM: 2em; PADDING-LEFT: 5em; PADDING-RIGHT: 5em; PADDING-TOP: 2em
}
</STYLE>
<SCRIPT type=text/javascript
src="simple%20jQuery%20date-picker%20plugin_files/jquery-1.3.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript
src="simple%20jQuery%20date-picker%20plugin_files/cal.js"></SCRIPT>
<SCRIPT type=text/javascript>
jQuery(document).ready(function () {
$('input.one').simpleDatepicker();
$('input.two').simpleDatepicker({ startdate: 2008, enddate: 2012 });
$('input.three').simpleDatepicker({ chosendate: '9/9/2010', startdate: '6/10/2008', enddate: '7/20/2011' });
$('input.four').simpleDatepicker({ x: 45, y: 3 });
});
</SCRIPT>
<META name=GENERATOR content="MSHTML 8.00.7600.16891"></HEAD>
<BODY>
<H1>simple jQuery date-picker plugin</H1>
<H6>last updated <!-- #BeginDate format:Am2 -->3/12/09<!-- #EndDate --> </H6>
<P>Here's a nifty little date picker, but it's not complete. In fact, it may
need YOUR help.</P>
<P>All the code here is original. I have to thank Mike Alsup for suggesting the
development pattern that helped this go from one-off simple script to
ready-to-use jQuery plugin.</P>
<P>You're welcome to use anything here as often as you like, even to include it
as part of commercially release products. Please don't package and sell it as a
standalone application.</P>
<P>Please send comments and suggestions (complete with any code changes/updates)
to:</P><IMG title="low-tech contact button" alt=images/contact.png
src="simple%20jQuery%20date-picker%20plugin_files/contact.png">
<HR>
<P>Some test inputs, each with a different setup:</P>
<P><INPUT class=one type=text name=date> <INPUT class=two type=text name=date>
<INPUT class=three type=text name=date></P>
<P>Some more test inputs, each with the same setup:</P>
<P><INPUT class=four type=text name=date> <INPUT class=four type=text name=date>
<INPUT class=four type=text name=date></P>
<H4>What is does:</H4>
<UL>
<LI>works on one or more text input elements (<CODE><input type="text" ...
/></CODE>)</LI>
<LI>highlights a preset date (first looking for a value in the input, then a
passed option / default, then just selects today)</LI>
<LI>closes when either a date is picked, the "today" button is hit, or the
"close" button is hit</LI>
<LI>allows fast navigation using a <select> field for months and
years</LI>
<LI>advances and reverses months with a hit of the <STRONG>«</STRONG> or
<STRONG>»</STRONG> buttons</LI>
<LI>automatically hides the <STRONG>«</STRONG> or <STRONG>»</STRONG> buttons
when either the start or end of the date range is reached</LI>
<LI>allows input for a year range and/or a date range</LI>
<LI>adjusts for leap years</LI>
<LI>allows you to set the x and y offset from the top left corner of the input
elements</LI>
<LI>allows you to easily change the output format (look for
"<CODE>jQuery.fn.simpleDatepicker.formatOutput = function (dateObj)
{...</CODE>")</LI>
<LI>is easily styled via CSS</LI>
<LI>works in IE 6, FF 3 (probably earlier) and Chrome 1.0 (and probably
others... just don't have them here on my laptop)</LI></UL>
<P>It is meant to NOT be an "everything-under-the-kitchen-sink" date picker.
Just there to help a user pick a date.</P>
<H4>How to use it:</H4>
<P>Simply call <CODE>$('input').simpleDatepicker();</CODE> on the set of
elements you would like to work with.</P>
<H4>Options</H4>
<P>You can pass an object literal with some options that will be applied to all
the datepickers setup with that call to <CODE>simpleDatepicker()</CODE></P>
<P><CODE>$('input').simpleDatepicker({chosendate: , startdate: , enddate: , x: ,
y: });</CODE></P>
<TABLE>
<THEAD>
<TR>
<TH>options</TH>
<TH>values</TH></TR></THEAD>
<TBODY>
<TR>
<TD class=code>[chosendate]</TD>
<TD>date string matching <CODE>mm/dd/yyyy</CODE> or
<CODE>m/d/yyyy</CODE></TD></TR>
<TR>
<TD class=code>[startdate]</TD>
<TD>4 digit year or date string matching <CODE>mm/dd/yyyy</CODE> or
<CODE>m/d/yyyy</CODE></TD></TR>
<TR>
<TD class=code>[enddate]</TD>
<TD>4 digit year or date string matching <CODE>mm/dd/yyyy</CODE> or
<CODE>m/d/yyyy</CODE></TD></TR>
<TR>
<TD class=code>[x]</TD>
<TD></TD>an integer, without quotes is fine, like so: <CODE>{ x: 6, y: 10
}</CODE></TR>
<TR>
<TD class=code>[y]</TD>
<TD></TD>an integer, without quotes is fine, like so: <CODE>{ x: 6, y: 10
}</CODE></TR></TBODY></TABLE></BODY></HTML>
rails3中使用， 个人是把cal.js文件放在asset下的js文件夹下，calendar.css 放入样式文件夹下，把页面上的话放在rail asset下的js文件夹下，也就下面这断
<SCRIPT type=text/javascript>
jQuery(document).ready(function () {
$('input.one').simpleDatepicker();
$('input.two').simpleDatepicker({ startdate: 2008, enddate: 2012 });
$('input.three').simpleDatepicker({ chosendate: '9/9/2010', startdate: '6/10/2008', enddate: '7/20/2011' });
$('input.four').simpleDatepicker({ x: 45, y: 3 });
});
</SCRIPT>
再用页面中html标签引有
<P><INPUT class=one type=text name=date> <INPUT class=two type=text name=date>
<INPUT class=three type=text name=date></P>
<P>Some more test inputs, each with the same setup:</P>
<P><INPUT class=four type=text name=date> <INPUT class=four type=text name=date>
<INPUT class=four type=text name=date></P>
引用方式主要是class与类型为text来使用，要不然失败的，
在rails中，写成
<%=text_field_tag '****' ,{},:class=>'one',%>这样就可以在点击文本框时，日历就会出现，但是英文显示
改下面代码可以中文显示
var today = new Date(); // used in defaults
var months = 'January,February,March,April,May,June,July,August,September,October,November,December'.split(',');
var monthlengths = '31,28,31,30,31,30,31,31,30,31,30,31'.split(',');
var dateRegEx = /^\d{1,2}\/\d{1,2}\/\d{2}|\d{4}$/;
var yearRegEx = /^\d{4,4}$/;把上面的months后的值换成一月，二月……………………十二月，就行
显示在下面代码中改
jQuery.fn.simpleDatepicker.formatOutput = function (dateObj) {
return (dateObj.getMonth() + 1) + "/" + dateObj.getDate() + "/" + dateObj.getFullYear();
};
把上面的return中的值位置换换就行了
注意得的是，因为rails中因为有自己带的jquery框架，所以不用把jquery-1.3.2.min框架文件放进去，引用。
希望能给像我一样的初学者带来帮助。
现带个官方文件，用来演示
今天突然发现，有个bug,默认年份是现在的加上明年。所以在下面加上有关时间的内容。
<script language="javascript">
var d = new Date()
var vYear = d.getFullYear()
var vMon = d.getMonth() + 1
var vDay = d.getDate()
var h = d.getHours();
var m = d.getMinutes();
var se = d.getSeconds();
s=vYear+(vMon<10 ? "0" + vMon : vMon)+(vDay<10 ? "0"+ vDay : vDay)+(h<10 ? "0"+ h : h)+(m<10 ? "0" + m : m)+(se<10 ? "0" +se : se);
document.write(s);//输出时间
</script>
类似资料：