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

来源：互联网发布：网络编程入门书籍编辑：程序博客网时间：2024/05/25 21:35

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、使用datepicker（日历）插件实现日期选择的基本操作

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

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

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>

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