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

最新推荐文章于 2018-08-23 09:26:51 发布

原创最新推荐文章于 2018-08-23 09:26:51 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#日历 #jsp #jquery #测试 #action #function

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何利用jQueryUI插件中的datepicker组件实现日期选择功能，包括插件的基本使用方法、常用参数说明及实现步骤。通过引入jQueryUI类库文件，创建HTML表单元素并设置日期选择器样式，最终实现用户友好的日期输入界面。

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>

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