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的使用
分享到:
相关推荐
在Web开发中,日期和时间的选择常常是一项必不可少的功能,jQuery UI Datepicker插件是一个非常流行的选择工具,它为用户提供了直观、易于使用的日期选择界面。然而,Datepicker默认只支持日期选择,不包含时间选择...
### jQuery UI 中 Datepicker 控件使用详解 #### 一、简介与基本使用 **Datepicker** 是 jQuery UI 提供的一个非常实用的日期选择插件,它可以帮助开发者轻松地在网页上添加日期选择功能。要使用 Datepicker,首先...
《jQuery UI Datepicker全主题详解》 在网页开发中,日期选择器是一个常见的交互元素,它使得用户能够方便地输入或选择日期。jQuery UI库中的Datepicker组件是此类功能的一个强大实现,它提供了丰富的功能和多样的...
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
jQuery UI Datepicker IE8 使用的基本解决方法:解决:IE8无法响应其中jquery.ui.datepicker部分标签a(无href)的onclick事件,和td由于放入标签a href="#",无法响应自身onclick事件,只验证了icon-trigger模式,...
### jQuery UI全教程之一:Dialog及Datepicker使用详解 #### 一、Dialog 组件使用教程 **1.1 Dialog 概述** Dialog 是 jQuery UI 中一个非常常用的组件,它可以实现弹出层的功能,广泛应用于登录、注册、消息提示...
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
jquery的日期插件Datepicker,这两天正好研究完了,将研究结果分享下,单独的封装汉化版本,都有注释,好修改也好使用,注意保持images里面图片的名称和路径,red-datepicker.css可以定义日期div的样式,我自己在源...
jquery datepicker 的中文包...<link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#datepicker" ).datepicker({dateFormat:"yy-mm-dd",regional:$.datepicker.regional['zh-CN']});
总的来说,jQuery UI为开发者提供了强大且易于使用的用户界面组件,通过`jquery-ui.css`和`jquery-ui.js`,我们可以快速构建交互性丰富的Web应用,提高用户的操作体验。然而,合理地配置和优化这两个文件,以适应...
这个中文帮助文档是针对jQuery UI的详细指南,旨在帮助开发者更好地理解和使用这个强大的工具集。 ### 1. jQuery UI 的主要功能 jQuery UI 包含了多种功能模块,包括但不限于: - **TABS(选项卡)**: 提供了一种...
**jQuery UI Datepicker是最受欢迎的JavaScript日历插件之一,尤其在jQuery库的广泛使用下,它成为开发人员实现日期选择功能的首选工具。本文将深入探讨Datepicker控件的关键特性、使用方法以及如何与其他技术如Java...
在页面中使用Datepicker之前,首先需要引入jQuery库和jQuery UI的CSS与JS文件。确保在HTML文件中添加以下代码: ```html <!DOCTYPE html> <title>jQuery UI Datepicker示例 ...
简要修改Jquery UI DatePicker,可以选择时间(小时,分),有需要的朋友可以参考一下。 补充说明:上面的代码做好后,没怎么测试,选择的时间是有问题的:问题1:选择的月份比当前月份少1,问题2:当选择的月份和...
jquery-ui中文日历控件,使用的时候记得先把文档编码改为UTF-8,否则中文显示乱码!
${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.css" > ${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"> ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"> ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-...
在JQueryUI中,你可以使用Autocomplete组件为输入框提供自动完成功能,这在搜索框或输入建议场景中非常有用。另外,Slider组件则可以创建滑动条,允许用户通过直观的方式选择数值或进行排序。 接下来,我们讨论Tab...
然而,"jQueryUI MetroUI WindowUI"主题并不是通过ThemeRoller生成的,而是使用了jQUIT Builder这一工具。 jQUIT Builder是针对jQuery UI的另一个主题构建工具,它允许开发者以更灵活的方式创建和编辑主题,尤其是...
在给定的"jquery-ui-1.10.3.custom.rar"压缩包中,我们特别关注的是其内置的日期时间选择插件,这个功能强大且易于使用的工具极大地提升了用户在网页上的交互体验。 首先,jQuery UI 1.10.3 版本是该库的一个稳定...
`development-bundle`目录包含未压缩和未合并的jQuery UI资源,适合在开发过程中使用,便于调试和定制。而`css`和`js`目录则包含已经压缩和合并的文件,适用于生产环境,以减少加载时间和网络带宽。 总的来说,...