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

原创 2012年03月27日 21:35:07

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>

 

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

相关文章推荐

jQueryUI中Datepicker(日历)插件的介绍和使用(10级学员 郞志课堂笔记)

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 说明 ...

jQueryUI中Datepicker(日历)插件的介绍和使用

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 ...

jQueryUI中Datepicker(日历)插件的介绍和使用

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 ...

JQuery日历插件My97DatePicker日期范围限制

JQuery日历插件My97DatePicker日期范围限制 作者:Cfans_gpl 时间:2012-12-4 22:40 Tuesday 分类: WEB开发  #坐上电梯直达评论...

JQuery日历插件My97DatePicker日期范围限制

My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制。 常规的调用比较简单,如下所示: 1 input class="Wdate" id=...

日期/日历插件My97Datepicker功能介绍

一. 简介1. 简介 目前的版本是:4.0 正式版 发布于2008-05-302. 注意事项My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 ...

jQueryUI的datepicker日期选择器的使用方法

1.引入文件 jquery.x.x.x.js文件 jquery-ui-x.x.x.custom.js文件 jquery-ui-x.x.x.custom.min.css文件...

jqueryui中插件Datepicker控件的使用

  • 2011年09月29日 15:51
  • 49KB
  • 下载

各种杂项组件(3)之--CalendarView(日历视图)、DatePicker/TimePicker(日期、时间选择器)、NumberPicker(数值选择器)

CalendarView日历视图 概述 示例 DatePickerTimePicker日期时间选择器 概述 用法 示例 NumberPicker数值选择器 概述 用法CalendarView(日历视图...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JqueryUI datepicker(日历)插件--实例选择日期
举报原因:
原因补充:

(最多只允许输入30个字)