`
flashdream8
  • 浏览: 680655 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery 日期控件

阅读更多

 JQuery提供了很多控件, 例如用于选择日期的日期控件(Date Picker)。这些控件并没有随Jquery的核心库一并发布。而是作为一个叫做"JQuery UI"的子项目——或者叫做插件——的形式发布。
所以, 我们除了要在页面中引用jquery的那个js文件外, 还需要在http://jqueryui.com/下载与我们使用JQuery对应版本的JQuery UI的程序包。
目前, 最新的JQuery版本是1.3。 与这个版本对应的JQuery UI版本是1.6rc6。
由于JQuery UI采取了显示和功能分离的设计(皮肤, 或者叫”换肤“)。所以, 我们需要为日期控件附加样式。JQuery UI最神奇的特点之一就是提供了一个网站来给我们修改控件的样式:http://jqueryui.com/themeroller/。在这个页面中, 将控件样式调整满意后, 点击左侧的"Download theme"按钮。就可以把样式下载下来了。现在, 下载的是JQuery UI1.6rc5版本所使用的样式库。如果您用的较低的1.5, 那么请注意在点击”Download theme“按钮后出现页面的右侧选择相应的版本。不然, 不同版本的样式是不兼容的。
将下载下来的zip包解开, 我们可以看到里面已经准备好我们要用jquery核心库和JQuery UI的库。首先, 我们把jquery-1.3.x.js复制到网站的js目录下,jquery-ui-personalized-1.6rc6.min.js、i18n目录、theme目录复制到网站js/ui目录下。
JQuery核心库的安装非常简单, 我们把jquery.1.3.x.js文件引入页面即可。一般来说, 我们会把这个js文件改名为jquery.js, 放到“/js"目录下。
然后, 我们将jquery-ui-personalized-1.6rc6.min.js引入页面。如果觉得它的文件名太长。可以直接改成jquery-ui.js或者其他比较短的名字。
最后, 引入分别引入js/ui/theme/ui.all.css样式表以及/js/ui/i18n/ui.datepicker-zh-CN.js脚本文件到页面中。就完成了中文日期控件的安装。如果我们需要其他语言的空间, 请更换ui.datepicker-zh-CN.js文件。在js/ui/i18n中有很多其他语言的脚本。
终于, 我们可以在页面中,给某个输入框绑定一个日期控件了。例如, 我们的页面中有这么一个input:
<input type="text" id="birthday" name="birthday"/>
那么, 我们可以在$(document).ready()的事件函数(不懂的可以参见Jquery核心库的说明或者网上的相关资料)中写:$("#birthday").datepicker();
现在打开页面, 如果不出意外。当我们点击这个文本框的时候就可以出现一个很炫的日期控件了。

现在修改一下:$("#bithday").attr("readonly", "true").datepicker(); 这样一来,用户就不能手工输入, 而只能通过控件选择日期了。

上面简单介绍了一下日期控件的使用方法。其实, 他们的可定制性是非常高的。今天我们只是使用了它们最简单最基本的功能。

分享到:
评论

相关推荐

    多功能jQuery日期控件2018

    【jQuery日期控件详解】 在Web开发中,日期选择器是一种常见的交互元素,它使得用户能够方便地输入或选择日期。jQuery,作为一个广泛使用的JavaScript库,提供了丰富的插件来实现这种功能。本篇文章将深入探讨名为...

    jquery日期控件(有下拉菜单选择年份)

    《jQuery日期控件:下拉菜单选择年份的实现》 在Web开发中,日期选择控件是不可或缺的一部分,它提供了用户友好的界面,让用户能够方便地输入或选择日期。在JavaScript库中,jQuery以其易用性和丰富的插件库而备受...

    jquery 日期控件 datepicker

    本篇文章将深入探讨这个功能丰富的日期控件,帮助你更好地理解和运用它。 ### 1. jQuery Datepicker 的安装与引入 在开始使用 `jQuery Datepicker` 之前,你需要确保已经安装了 `jQuery` 和 `jQuery UI`。你可以...

    带时间的jQuery日期控件代码.zip

    标题中的“带时间的jQuery日期控件代码”指的是一个JavaScript库,特别地,它是基于jQuery的一个组件,用于在网页上创建具有时间和日期选择功能的输入控件。这种控件通常用于用户需要输入特定日期和时间的场景,比如...

    jquery日期控件美化日期选择页面

    本主题聚焦于“jquery日期控件美化”,旨在提升日期选择器的用户体验,使其在网页应用中更加美观和易用。下面我们将深入探讨jQuery日期控件的使用和美化方法。 1. **jQuery日期插件** jQuery有许多第三方插件提供...

    jQuery日期控件

    这就是jQuery日期控件发挥重要作用的地方。 标题"jQuery日期控件"指的是使用jQuery和可能的插件(如jQuery UI、Bootstrap Datepicker等)来创建一个具有丰富功能和自定义样式的日期选择器。这些控件通常会提供比...

    精确到秒的JQuery日期控件

    总结起来,创建一个精确到秒的JQuery日期控件涉及选择合适的日期插件(如jQuery UI Datepicker),设置正确的格式,以及与JAVA后端进行AJAX通信。通过这种方式,开发者可以方便地在前端获取和处理精确到秒的日期时间...

    asp.net jquery 日期控件

    总的来说,`asp.net jquery 日期控件`涉及到的技术点包括:ASP.NET控件、jQuery库的使用、JavaScript的DOM操作、以及第三方插件`My97DatePicker`的集成和应用。掌握这些技能,将有助于提升你在Web开发中的能力,使你...

    TextBox Jquery日期控件

    在网页开发中,为了提供更好的用户体验,我们常常需要在输入框中添加日期选择功能,这时候Jquery日期控件就派上了用场。本教程将详细讲解如何使用TextBox结合Jquery的WdatePicker插件实现一个方便快捷的日期选择器。...

    带小时和分钟的jQuery日期控件代码

    本主题聚焦于"带小时和分钟的jQuery日期控件代码",这是一个常见需求,尤其是在构建Web应用时,用户可能需要选择特定的日期和时间。下面将详细解释如何使用jQuery实现这样的功能。 首先,我们需要一个日期时间选择...

    jquery日期控件

    在本案例中,我们关注的是"jquery日期控件",这是一个基于jQuery的UI组件,用于在网页上创建交互式的日期选择器。下面将详细讨论这个主题。 一、jQuery日期控件的基本概念 jQuery日期控件是一种用户界面元素,允许...

    Jquery日期控件(超炫)

    这个"Jquery日期控件(超炫)"提供了一种美观且易于使用的界面,帮助用户在网页上选择日期,特别适用于需要用户输入日期的场景,如预订系统、日程安排等。 首先,我们需要理解jQuery的基本概念。jQuery的核心功能...

    多功能jQuery日期控件

    【标题】: "多功能jQuery日期控件" 是一个专门用于前端开发的插件,它为网页界面提供了丰富的日期选择功能。这个控件以其强大的功能和灵活性,在jQuery库中占据了一席之地,使得开发者能够轻松地在网页上实现日期...

    多功能jQuery日期控件 jeDate

    **jeDate:一款高效实用的jQuery日期控件** 在网页开发中,日期控件是必不可少的元素之一,它能够帮助用户方便地选择日期,提高用户体验。jeDate是一款专为jQuery设计的多功能日期控件,其设计目标是为开发者提供一...

Global site tag (gtag.js) - Google Analytics