Jquery中文网 > jQuery > JQuery UI > 正文 jQuery UI 教程之三 ——jquery ui datepicker的使用

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

发布时间：2012-11-16 编辑：www.jquerycn.cn

jquery中文网为您提供jquery ui datepicker，jquery datepicker等资源，欢迎您收藏本站，我们将为您提供最新的jquery ui datepicker，jquery datepicker资源

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

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

DatePicker基本使用方法：

代码如下

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/<a href="http://www.jquerycn.cn/
" target="_blank" class="inner-link">jquery</a>ui/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>

就这么简单，你只需要引入一个3个外部文件，即一个jquery库文件，一个jquery ui 核心文件，还有一个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的使用

您可能感兴趣的文章：
jQuery UI 实例 – 日期选择器（Datepicker）
jQuery UI API – 日期选择器部件（Datepicker Widget）
基于jquery插件制作左右按钮与标题文字图片切换效果
 jQuery UI 使用
 jqueryui之autocomplete
jQuery之日期选择器的深入解析
 jQuery UI CSS 框架 API
jQuery UI 实例 – 对话框（Dialog）
jQuery UI 教程
 新浪,163滑动导航菜单代码