`
wcgchen
  • 浏览: 4233 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
社区版块
存档分类
最新评论

jQuery中datepick的使用

    博客分类:
  • Ajax
阅读更多

      jQuery中的datepick插件,在现在web2.0的应用相当广泛。今天自己特意找了找这方面的资料,结果是非常令人失望。网上的很多实例,都是互相Copy来Copy去的。估计作者在Copy的时候,都没用验证是否能正常运行。因此,自己特意找了下API,写个小笔记式的记录,供大家一起分享和讨论。所设计的东西,都很浅显。有什么不足的,请各位体谅和指正!
      首先,你要到http://plugins.jquery.com/project/datepick这个地址出,下载datepick插件包;还有下载一个jQuery.js包。
      一般人在做工程的时候,喜欢把JS文件独立放在一个文件夹里,这里我也是如此。把下载的datepick包里的jquery.datepick.js、jquery.datepick-zh-CN.js放到/js的文件夹下;另外,还要把datepick包里的jquery.datepick.css文件,放到/css 文件夹下。如图:

 现在编写页面:如下:

     <head>
        <script type="text/javascript" src="/strutsTest/js/jquery.js"></script>
        <script type="text/javascript" src="/strutsTest/js/jquery.validate.js"></script>
        <script type="text/javascript" src="/strutsTest/js/jquery.datepick.js"></script>
        <script type="text/javascript" src="/strutsTest/js/jquery.datepick-validation.js"></script>

        <script type="text/javascript" src="/strutsTest/js/jquery.datepick-zh-CN.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#favDate').datepick();
                $('#holidayDates').datepick({rangeSelect: true});
                $('#birthDate').datepick({maxDate: new Date()});
                 /*
                $('#validateForm').validate({
                    errorPlacement: $.datepick.errorPlacement,
                    rules: {
                        birthDate: {dpMaxDate: []}
                    },
                    messages: {
                        holidayDates: 'Please enter a valid date range'}
                    });
                */
            });
        </script>
        <style type="text/css">@import "/strutsTest/css/jquery.datepick.css";</style>
    </head>
    <body>
        <form id="validateForm">
            <p>
                Favourite date:
                <input type="text" id="favDate" name="favDate" size="10"
                    class="dpDate" />
            </p>
            <p>
                Period of last holiday:
                <input type="text" id="holidayDates" name="holidayDates" size="24"
                    class="dpDate" />
            </p>
            <p>
                Date of birth:
                <input type="text" id="birthDate" name="birthDate" size="10" />
            </p>
        </form>
    </body>

其中,strutsTest是我个人的工程名称~

做好这些工作,就可以进行体验了。

加载到Tomcat中,运行,进入页面体验~~

这是我个人的效果图:

说明一点:其中/js/ jquery.datepick-zh-CN.js这个文件,是让弹出的日期选择框支持中文的js文件。只要引入,就可以了!!

分享到:
评论

相关推荐

    jquery.datepick.zip

    jquery.datepick.rar是一个jquery实现的框架,实现了日历框选择日期的功能,简单实用 jquery-1.3.2.js jquery核心 jquery.datepick.js jquery日历插件 jquery.datepick.css 日历样式 jquery.datepick-zh-CN.js 日历...

    jquery.datepick.js

    jquery.datepick.js

    jquery-datepick插件

    jQuery Datepick 是一个广泛使用的JavaScript库,它为网页中的日期选择提供了一个直观且用户友好的界面。这个插件基于jQuery框架,使得在网页上添加日期选择功能变得轻而易举,无论是简单的日期输入还是复杂的日期...

    JQuery.Datepick

    8. **易用性** - 使用简单,只需要引入 `jquery-1.3.2.js` 和 `jquery.datepick.js` 文件,并通过jQuery选择器调用 `.datepick()` 方法,即可快速启用日期选择功能。 **使用示例:** ```html &lt;!DOCTYPE html&gt; ...

    datepick基于jQuery的日期点选择和日期范围选择

    10. **集成和扩展**:datepick可以与其他jQuery插件或库配合使用,如Bootstrap,提供更丰富的用户体验。同时,其源代码是开放的,允许开发者根据需求进行定制和扩展。 总的来说,datepick是一个强大且灵活的日期...

    jquery.datepicker-zh-CN.js

    jquery datepicker 的中文包 调用方法 &lt;script src="./public/js/jquery-ui-1.10.3.min.js"&gt; &lt;script src="./public/js/jquery.datepicker-zh-CN.js"&gt;&lt;/script&gt; &lt;link href="./public/css/jqueryui/jquery-ui-...

    jquery的日期插件、实现日期的弹框、实现手动选择日期输入

    如何使用jquery的日期插件 * 引入jquery的js文件 &lt;script type="text/javascript" src="../js/jquery-1.4.2.js"&gt; * 引入日期插件的文件 * 日期插件的js文件 &lt;script type="text/javascript" src="./jquery....

    Jquery日期选择器datepick

    在HTML中,为需要日期选择器的元素添加`id`属性,然后在JavaScript中使用`$(document).ready()`函数来初始化Datepicker: ```html ``` ```javascript $(function() { $("#datepicker").datepicker(); }); ``` ...

    jquery-ui之jquery-ui-datepick改进(可选时分秒)

    功能修改: 1,today以前是跳转到今天日期,不会直接上屏,现改为直接上屏 2,close以前是关闭日历。由于在其他地方点击会自动... 3,增加时分秒功能 4,此版本jquery-ui是1.11.2,可以直接下载此版本对比查看修改处

    jquery-ui-1.11.2日期控件datepicker

    ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.css" &gt; ${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"&gt; ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"&gt; ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-...

    jquery.ui.datepicker-zh-CN.js

    jquery-ui中文日历控件,使用的时候记得先把文档编码改为UTF-8,否则中文显示乱码!

    日期控件(input输入框)

    在本案例中,这个日期控件是通过JavaScript和CSS实现的,并且依赖于jQuery库。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互,使得开发者能更高效地编写JavaScript代码。 首先...

    JQuery datepicker 用法详解

    在本文中,我们将深入探讨其基本使用方法和一些关键的配置选项。 首先,让我们看看Datepicker的基本引入和初始化过程。在HTML文件中,你需要引入jQuery库、jQuery UI库以及对应的CSS样式表。以下是一个简单的示例:...

    jquery获取easyui日期控件的值实现方法

    然而,直接使用jQuery的`.val()`方法来获取日期控件的值可能会遇到问题,就像描述中提到的那样,返回的结果可能是空或者初始值。 EasyUI的日期控件在页面上表现为一个文本框,同时内部包含了一个隐藏的输入元素,...

    用jquery制作的日期选择器

    为了使用这个日期选择器,你需要在页面中引入jQuery和datepick.js,并确保它们在需要使用日期选择器的脚本之前加载。然后,你可以按照以下步骤配置和使用日期选择器: 1. **引入库**: 在HTML头部添加jQuery和...

    datepicker_datepicker_seeing3ds_zip_

    看到标签有"datepicker",我们可以确定这是一个关于网页中使用的日期选择组件,通常用于用户输入日期的交互。"seeing3ds"可能是这个特定实现的一个特性,它可能涉及到网页支付过程中的3D Secure验证,这是一种增强...

    js完美日期选择器,jQuery Datepicker最新demo,包括所有语言包

    文件名`jquery.datepick.package-4.0.3`暗示了这是一个完整的包,可能包含了库本身、文档、示例、以及所有的语言包。 **核心特性:** 1. **多语言支持**:jQuery Datepicker支持多种语言,允许用户根据他们的地理...

    jQuery表单验证+日期插件

    例如,在注册或预订表单中,用户可能需要输入出生日期,使用datepick选择日期,然后用formValidator验证其合法性。 - 结合使用这两个插件,可以创建一个更强大、更友好的前端表单系统,既能保证数据质量,又能提高...

    jquery文档

    在使用前,我们需要引入jQuery库和datepick相关的CSS及JS文件。在HTML中,我们可以创建一个input元素,作为日期选择器的容器: ```html ``` 然后,在JavaScript中初始化Datepick: ```javascript $(document)....

Global site tag (gtag.js) - Google Analytics