JQuery datepicker 使用方法

2020-05-22 21:59:54易采站长站整理

官方地址: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’