关闭

JqueryUI datepicker(日历)插件--实例选择日期

标签: 日历jspjquery测试actionfunction
2852人阅读 评论(0) 收藏 举报
分类:

JqueryUI  datepicker(日历)插件--实例选择日期

今天我们主要的学习了jqueryUI交互性插件的日历。在页面开发中,经常会遇到需要用户输入日期的操作。今天我们不用一般的方法来实现这个操作。我们主要介绍的就是一种简单的做法。使用JqueryUI中的datepicker(日历)插件,该插件调用的语法格式如下:

         $(“.selector”).datepicker(options);

其中,”.selector”表示DOM元素,一般指文本框,由于该插件的作用是提供日期选择,因此,常与一个文本框绑定,将选择后的日期显示在该文本框中。选项options是一个对象,通常改变其参数对应的值,从而实现插件功能的变化。

一、我们首先来一起来学习一下options常用的一些参数及其说明:以下是我们在项目测试中使用的一些常用参数,如下:

1changeMonth:true, //在日期的标题栏中是否出现下拉选择框,选择日期中的月份。true代表有选择框,false代表无选择框

2changeYear:false,   //在日期的标题栏中是否出现下拉选择框,选择日期中的年份。true代表有选择框,false代表无选择框

3showButtonPanel:true,  //在日期面板的下方出现两个按钮,一个是今天,一个是关闭。默认值是false,不显示的

4closeText:"关闭",  //必须结合showButtonPanel使用,并且showButtonPanel的值必须是true,否则看不到效果

5dateFormat:"yy-mm-dd",  //表示日期显示的格式

6defaultDate:-3,  //缺省值在当前日期中加或减几天

7showAnim:"toggle",  //日期界面出现的动画效果

8showWeek:true,   //显示周  当前中的第几周

9firstDay:1,   //默认firstDay 当前的第一天

10yearRange:"2011:2012",//表示下拉框中年份的范围

、使用datepicker(日历)插件实现日期选择的基本操作

在进行操作前,我们要来看一下我们所要实现的效果:如下图:

1、首先我们要新建一个JSP页面,在JSP页面中来完成日期的选择操作。在JSP页面中,我们首先要做的就是要引入相应的jqueryUI类库文件,我们所引入的一些类库文件代码如下所示:

<!-- 引入相应的jqueryUI的类库文件 -->

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script>

    <script src="${pageContext.request.contextPath}/js/jquery.ui.datepicker-eu.js"></script>

    <script src="${pageContext.request.contextPath}/js/jquery.ui.datepicker-zh-CN.js"></script>

    <script src="${pageContext.request.contextPath}/js/jquery.ui.datepicker.js"></script>

   

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">

2、在页面中,我们要将实现该功能的效果图编写出来,让我们可以进行选择相应的日期。Html的代码如下:

<body>

    <h1>日历插件</h1>

    <div id="datepicker">、

    <form action="" method="get">

    选择出生日期:<input id="dp" type="text"/>

    </form>

    </div>

  </body>


3、下面使我们jquery的代码实现的部分了,在这里,我们用一些参数给日历增加了一些效果,相应的效果解析见以下代码的注释部分:代码如下:

   

 <script type="text/javascript">

    $(document).ready(function(){

       $("#dp").datepicker({

           changeMonth:true, //在日期的标题栏中是否出现下拉选择框,选择日期中的月份。true代表有选择框,false代表无选择框

           changeYear:false, //在日期的标题栏中是否出现下拉选择框,选择日期中的年份。true代表有选择框,false代表无选择框

           showButtonPanel:true,  //在日期面板的下方出现两个按钮,一个是今天,一个是关闭。默认值是false,不显示的

           closeText:"关闭",  //必须结合showButtonPanel使用,并且showButtonPanel的值必须是true,否则看不到效果

           dateFormat:"yy-mm-dd",  //表示日期显示的格式

           defaultDate:-3,  //缺省值在当前日期中加或减几天

           showAnim:"toggle",  //日期界面出现的动画效果

           showWeek:true,    //显示周  当前中的第几周

           firstDay:1,   //默认firstDay 当前的第一天

           yearRange:"2011:2012"    //表示下拉框中年份的范围

       });

    });

</script>

 

通过以上内容,我们就可以实现简单的选择日期的操作。相应的效果还需要我们自己去验证测试。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:165738次
    • 积分:2979
    • 等级:
    • 排名:第12190名
    • 原创:139篇
    • 转载:5篇
    • 译文:0篇
    • 评论:24条
    最新评论