jQuery UI 教程之三 ——jquery ui datepicker的使用

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

这篇文章我们就来说说 jquery ui datepicker 的使用。

DatePicker基本使用方法：

文件引入
1.<link?href="http://ajax.googleapis.com/ajax/libs/<;a href="http://www.jquerycn.cn/" target="_blank">jquery</a>ui/1.8.18/themes/base/jquery-ui.css"?rel="stylesheet"?type="text/css"/>?
2.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>?
3.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

html代码：
1.<div?type="text"?id="datepicker"></div>

js代码：
1.?
2.$(document).ready(function()?{??
3.?$("#datepicker").datepicker();
4.?});

就这么简单，你只需要引入一个3个外部文件，即一个jquery库文件，一个jquery ui 核心文件，还有一个jquery ui 样式文件，然后用 datepicker() 方法就可以了。

请看示例代码 jquery ui datepicker 示例

jquery ui datepicker 公开的方法：

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

查看前两节教程
jQuery UI 教程之一 ——入门

jQuery UI 教程之二 ——jquery ui dialog的使用

评论

1 楼 rex0654335 2014-03-12  

既然是教程，烦请排版舒服点。