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(日历)插件的介绍和使用

http://jqueryui.com/datepicker/ jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: ...
  • fjseryi
  • fjseryi
  • 2016年07月18日 15:11
  • 7175

JQuery日期插件datepicker的使用

http://blog.csdn.net/cuihaiyang/article/details/6218928/ jQuery是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活...
  • u013908405
  • u013908405
  • 2017年02月09日 09:52
  • 974

日期选择器:jquery datepicker的使用

jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。 官方地址:http...
  • sinat_28597179
  • sinat_28597179
  • 2016年03月19日 11:51
  • 1963

Element UI DatePicker 日期选择器

这里写代码片两个日期选择框,不能大于今天,第二个选择器在第一个日期之后。效果如下图: 默认 ...
  • sourcespro
  • sourcespro
  • 2017年06月08日 15:08
  • 9229

JqueryUI datepicker(日历)插件的from to的一个小实例

JqueryUI datepicker(日历)插件的from to的一个小实例 我们通过上一节,我们了解并会写了用jqueryUI datepicker插件选择日期的方法,现在我来简单的介绍一下一个...
  • smallsundoudou
  • smallsundoudou
  • 2012年03月27日 21:36
  • 4134

jquery UI datepicker 增加 时间的选择。

一句话不割: Jquery UI 很刁的,一套完整的东西,用的很爽。比如datepicker ,时间的选择,很好用,也很简单。可以,这个插件有个致命的东西,不能选择时间,蛋疼: 原始的: ...
  • yangyi2083334
  • yangyi2083334
  • 2013年02月21日 10:39
  • 8375

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

1.引入文件 jquery.x.x.x.js文件 jquery-ui-x.x.x.custom.js文件 jquery-ui-x.x.x.custom.min.css文件...
  • u012833063
  • u012833063
  • 2013年12月20日 10:37
  • 1050

日期选择器:jquery datepicker的使用

在jquery ui中,提供了一个非常实用的日期选择器:datepicker,使用它能非常方便的展现日历中的日期,灵活配置相关选项,包括日期格式、范围等。我们经常在WEB应用中用到datepicker...
  • oShaPoLang
  • oShaPoLang
  • 2013年12月09日 18:23
  • 2375

jQuery UI -- 日历选择器

用jQuery UI实现的日期选择器   在这之前,我们先来了解一下jQuery UI。jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交...
  • csdn_yudong
  • csdn_yudong
  • 2016年11月21日 22:27
  • 1915

用DatePicker和TimePicker写的一个日历时间选择案例

整个例子就用了DatePicker和TimePicker来完成,非常简单。简单介绍下DatePicker 、 TimePicker ,它们都继承自android.widget.FrameLayout,...
  • Monas
  • Monas
  • 2015年05月27日 17:11
  • 1102
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JqueryUI datepicker(日历)插件--实例选择日期
举报原因:
原因补充:

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