JQuery datepicker 使用方法(1)

jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等

官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/

一个不错的地址,用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/

DatePicker基本使用方法:


代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

<script> 
$(document).ready(function() { 
$("#datepicker").datepicker(); 
}); 
</script> 
</head> 
<body style="font-size:62.5%;"> 

<div type="text" id="datepicker"></div> 

</body> 
</html>


DatePicker支持鼠标点选日期,同时还可以通过键盘控制选择: 


代码如下:

page up/down - 上一月、下一月 
ctrl+page up/down - 上一年、下一年 
ctrl+home - 当前月或最后一次打开的日期 
ctrl+left/right - 上一天、下一天 
ctrl+up/down - 上一周、下一周 
enter - 确定选择日期 
ctrl+end - 关闭并清除已选择的日期 
escape - 关闭并取消选择


实用功能: 


代码如下:

$.datepicker.setDefaults( settings ) - 全局设置日期选择插件的参数. 
$.datepicker.formatDate( format, date, settings ) - 格式化显示的日期字符串 
$.datepicker.iso8601Week( date ) - 给出一个日期,确实他是一年中的第几周 
$.datepicker.parseDate( format, value, settings ) - 按照指定格式获取日期字符串


日期格式: 


代码如下:

d - 每月的第几天 (没有前导零) 
dd - 每月的第几天 (两位数字) 
o - 一年中的第几天 (没有前导零) 
oo - 一年中的第几天 (三位数字) 
D - day name short 
DD - day name long 
m - 月份 (没有前导零) 
mm - 月份 (两位数字) 
M - month name short 
MM - month name long 
y - 年份 (两位数字) 
yy - 年份 (四位数字) 
@ - Unix 时间戳 (从 01/01/1970 开始) 
'...' - 文本 
'' - 单引号 
(其它) - 文本



其它标准日期格式: 


代码如下:

ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601) 
COOKIE - 'D, dd M yy' 
ISO_8601 - 'yy-mm-dd' 
RFC_822 - 'D, d M y' 
RFC_850 - 'DD, dd-M-y' 
RFC_1036 - 'D, d M y 
RFC_1123 - 'D, d M yy' 
RFC_2822 - 'D, d M yy' 
RSS - 'D, d M y' 
TIMESTAMP - '@' 
W3C - 'yy-mm-dd'