jQuery UI Datepicker是一个高效的为您的页面添加日期的插件. 你可以自定义日期格式和语言, 您可以限制可选择的日期范围,可以轻易的将事件添加到按钮或者其他的选项中.
默认情况下, datepicker calendar 在onFocus上打开并且自动在选择日期触发onBlur后关闭. 如果要添加一个内置的calendar, 只需要在div或者span上调用datepicker即可.
您可以使用键盘或者快捷键操作datepicker:
$("#datepicker").datepicker();
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker();
});
</script>
</head>
<body style="font-size:62.5%;">
<div type="text" id="datepicker"></div>
</body>
</html>
可以是一个函数提供一个input field和当前datepicker的实例并且返回一个选项更新当前的datepicker. 这个事件只发生在datepicker显示之前.
beforeShow事件进行操作.
$('.selector').datepicker({
beforeShow: function(input) { ... }
});这个函数使用一个日期作为参数并且必须返回一个数组,[0]中的true/false指示这个日期是否被选中,[1]中是默认的CSS样式名称或者''. 这个事件在datepicker中每一天显示之前触发.
beforeShowDay事件进行操作.
$('.selector').datepicker({
beforeShowDay: function(date) { ... }
});允许你定义自己的事件在datepicker移动到其他的月份/年份时. 这个函数接受当前显示的第一个月的第一天作为参数. this指的是相关的input field.
onChangeMonthYear事件进行操作.
$('.selector').datepicker({
onChangeMonthYear: function(date) { ... }
});允许你在datepicker关闭时定义自己的事件. 是否有日期被选中. 这个函数接受被选中的日期作为参数. this指的是相关的input field.
onClose事件进行操作.
$('.selector').datepicker({
onClose: function(date) { ... }
});允许你在datepicker选中时定义自己的事件. 这个函数接受被选中的日期作为参数. this指的是相关的input field.
onSelect事件进行操作.
$('.selector').datepicker({
onSelect: function(dateText) { ... }
});完全移除datepicker功能. 这将使元素返回到之前的初始化状态.
关闭datepicker.
打开 datepicker.
获取或者设置datepicker参数. 如果没有提供参数值则是获取.
在一个"dialog"中打开一个datepicker.
dateText: 初始化的日期.
onSelect: 当一个日期被选中时的回调函数. 这个函数接收datepicker选中的日期作为参数.
settings: datepicker的设定.
pos:dialog的top/left的[x, y]坐标 或者一个鼠标事件(MouseEvent)的坐标. 如果不提供此参数dialog将显示在屏幕正中.
确定一个datepicker是否已关闭.
关闭一个先前打开的datepicker.
speed: 关闭的速度.
呼出一个先前访问的datepicker.
返回一个datepicker中当前日期, 或者返回两个日期成为一个时间范围.
设置当前时间给datepicker作为第一次控制,或者两个时间作为时间范围.
endDate: 时间范围中新的结束时间.
jQuery UI Datepicker插件使用jQuery UI CSS 框架的外观和风格，包括颜色和背景纹理.我们建议您使用ThemeRoller工具来创建和下载的自定义主题，很容易建立和维护.
如果有更深层次的个性化需要，有特定类别的工具ui.datepicker.css样式可供参考，可以修改这些参考。这些课程是下面以高亮和粗体显示的。
Note: 注：这是一个示例datepicker插件所产生的标记,而不是你应该使用的标记.创建一个datepicker唯一需要的标记是 <input type="text" /> or <div></div>.