simple jQuery date-picker plugin
是一款很方便使用的插件日历控件，样式简单，功能强大。现在就说一下在rails 3中使用。
它一共有三个部分，一是jquery 框架，二是就本身cal.js文件，最后一个是样式文件calendar.css.还有页面上jquery代码
从上面的代码中得到，它由input html控件来触发。
以下html页面代码且input 类型为text来使用。
simple jQuery date-picker plugin simple jQuery date-picker plugin
last updated 3/12/09
Here's a nifty little date picker, but it's not complete. In fact, it may need YOUR help.
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.
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.
Please send comments and suggestions (complete with any code changes/updates) to:
Some test inputs, each with a different setup:
Some more test inputs, each with the same setup:
What is does:
- works on one or more text input elements (
<input type="text" ... />) - highlights a preset date (first looking for a value in the input, then a passed option / default, then just selects today)
- closes when either a date is picked, the "today" button is hit, or the "close" button is hit
- allows fast navigation using a <select> field for months and years
- advances and reverses months with a hit of the « or » buttons
- automatically hides the « or » buttons when either the start or end of the date range is reached
- allows input for a year range and/or a date range
- adjusts for leap years
- allows you to set the x and y offset from the top left corner of the input elements
- allows you to easily change the output format (look for
"
jQuery.fn.simpleDatepicker.formatOutput = function (dateObj) {...") - is easily styled via CSS
- works in IE 6, FF 3 (probably earlier) and Chrome 1.0 (and probably others... just don't have them here on my laptop)
It is meant to NOT be an "everything-under-the-kitchen-sink" date picker. Just there to help a user pick a date.
How to use it:
Simply call $('input').simpleDatepicker(); on the set of
elements you would like to work with.
Options
You can pass an object literal with some options that will be applied to all
the datepickers setup with that call to simpleDatepicker()
$('input').simpleDatepicker({chosendate: , startdate: , enddate: , x: ,
y: });
| options | values |
|---|---|
| [chosendate] | date string matching mm/dd/yyyy or
m/d/yyyy |
| [startdate] | 4 digit year or date string matching mm/dd/yyyy or
m/d/yyyy |
| [enddate] | 4 digit year or date string matching mm/dd/yyyy or
m/d/yyyy |
| [x] | an integer, without quotes is fine, like so: |
| [y] | an integer, without quotes is fine, like so: |
rails3中使用， 个人是把cal.js文件放在asset下的js文件夹下，calendar.css 放入样式文件夹下，把页面上的话放在rail asset下的js文件夹下，也就下面这断
再用页面中html标签引有
Some more test inputs, each with the same setup:
引用方式主要是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,默认年份是现在的加上明年。所以在下面加上有关时间的内容。