http://jqueryui.com/datepicker/

本文转自:http://blog.csdn.net/redarmy_chen/article/details/7400571

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

Datepicker插件的属性:

属性

数据类型

默认值

说明

altField

String

""

使用备用的输出字段,即将选择的日期

以另一种格式,输出到另一个控件中,

值为选择符,即要输出的控件

altFormat

String

""

altField输出的格式,

详细格式见formatDate方法

appendText

String

""

指定每个日期字段后面显示的文本

autoSize

Boolean

false

是否自动调整控件大小,

以适应当前的日期格式的输入

buttonImage

String

""

指定弹出按钮图像的URL,若设置则

buttonText将成为alt值

buttonImageOnly

Boolean

false

是否将图像放在控件后面,作为触发器

buttonText

String

"..."

指定触发按钮上显示的文本,showOn

属性应设置为button或both

changeMonth

Boolean

false

是否使用下拉列表选择月份

changeYear

Boolean

false

是否使用下拉列表选择年份

closeText

String

"Done"

指定关闭链接显示的文本

dateFormat

String

"mm/dd/yy"

指定显示日期的格式

defaultDate

Date

String

Number

null

首次打开显示的日期,可以用Date对象

指定一个实际日期,或指定距离今天

的天数(如+7)、字符串(y表示年

、m表示月、w表示周、d表示天,如

"+1m+7d")默认为null,表示今天

duration

Number

String

"normal"

日期选择器呈现的速度,可以为毫秒数

firstDay

Number

0

设置每周的第一天,0表示星期日,

1表示星期一等

maxDate

Date

Number

String

null

可以选择的最大日期。null表示无限制

格式见defaultDate

minDate

Date

Number

String

null

可以选择的最小日期,null表示无限制

格式见defaultDate

numberOfMonths

Number

Array

1

设置一次要显示几个月。可以为包含两个

数字的数组,表示显示的行数和列数

selectOtherMonths

Boolean

false

是否可以选择非当前月的日期,

showOtherMonths属性必须为true

shortYearCutoff

String

Number

"+10"

设置截止的年份的值,若为数字(0~99)

则直接使用其值,若是字符串,则转化为

数字并与当前年份相加。当超过截止

年份时,则被认为是上个世纪

showAnim

String

"show"

设置显示或隐藏的动画名

showButtonPanel

Boolean

false

是否显示按钮面板

showCurrentAtPos

Number

0

指定在多月份显示时,当前月份位于

何处,从左上方0算起

showMonthAfterYear

Boolean

false

是否在标题中的年份后显示月份

showOn

String

"focus"

设置触发选择器的事件名称

showOtherMonths

Boolean

false

是否显示其他月份

stepMonths

Number

1

指定单击上月下月链接时,移动几个月

yearRange

String

c-10:c+10

设置下拉列表框中显示的年份范围,

可以是相对今年(-nn:+nn)或相对于

选择的年份(c-nn:c+nn)或绝对年份

(nnnn:nnnn)

第一个日历插件的使用实例

首先导入需要的类库文件:

<!-- 引入相应的jquery的UI文件 -->

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

<!-- 引入此js文件将日历中内容转化成中文 -->

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

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

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

首先进行页面代码的编写:

  1. <div class="demo">
  2. <p>Date:<input type="text" id="datepicker"></p>
  3. </div>

然后使用js代码对插件进行调用

[javascript] view plaincopy

  1. <script type="text/javascript">
  2. $(function() {
  3. //插件的调用
  4. $("#datepicker").datepicker({
  5. //在这里进行插件的属性设置
  6. });
  7. });
  8. </script>

效果截图:

下面通过实例对一些常用属性进行验证:

1、  altField :使用备用的输出字段,即将选择的日期以另一种格式,输出到另一个控件中,值为选择符,即要输出的控件

altFormat:altField输出的格式

实例验证:

页面代码:

  1. <div class="demo">
  2. <p>Date: <input type="text" id="datepicker">
  3. <input type="text" id="alternate" size="30"/></p>
  4. </div>

Js代码:

[javascript] view plaincopy

  1. $(function() {
  2. $( "#datepicker" ).datepicker({
  3. altField: "#alternate",
  4. altFormat: "DD, d MM, yy"
  5. });
  6. });

效果截图:

2、showAnim :设置日期面板显示或隐藏的动画名

js代码的编写:

[javascript] view plaincopy

  1. $(function() {
  2. $( "#datepicker" ).datepicker();
  3. $( "#anim" ).change(function() {
  4. $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
  5. });
  6. });

3、showButtonPanel:是否显示按钮面板

Js代码:

[javascript] view plaincopy

  1. $( "#datepicker" ).datepicker({
  2. showButtonPanel:true
  3. });

如图可以看到面板下方有两个按钮:点击“今天”会跳到今天的日期,点击“关闭”会关闭面板。

4、dateFormat:指定显示日期的格式

Js代码:

[javascript] view plaincopy

  1. $( "#datepicker" ).datepicker({
  2. dateFormat:"yy/mm/dd"
  3. });

效果截图:

通过图像可以看到,文本框中日期格式由以前的“yy-mm-dd”转变成了“by/mm/dd”。当然还有别的格式,可以根据自己的喜好进行设置。

5、changeMonth:是否使用下拉列表选择月份

changeYear:是否使用下拉列表选择年份

在js代码中添加此属性:changeMonth: true  或者   changeYear: true

其中标题栏的月份或者年份会出现下拉菜单的形式:

6、yearRange:设置下拉列表框中显示的年份范围,可以是相对今年(-nn:+nn)或相对于选择的年份(c-nn:c+nn)或绝对年份(nnnn:nnnn)

在js代码中添加属性:

[javascript] view plaincopy

  1. $( "#datepicker" ).datepicker({
  2. changeYear: true,
  3. yearRange:"2011:2012"
  4. });

效果截图:

从图中可以看到年的位置为下拉菜单的形式,其中下拉菜单只会出现2011与2012年的选项。

注:yearRange属性只有在changeYear为true的情况下才使用。

7、numberOfMonths:设置一次要显示几个月。可以为包含两个数字的数组,表示显示的行数和列数

Js代码:

[javascript] view plaincopy

  1. $( "#datepicker" ).datepicker({
  2. numberOfMonths: 3
  3. });

上面指定numberOfMonths为3 ,那么弹出的日历面板就会显示当前以及以后两个月,如图:

8、showOn:设置触发选择器的事件名称

buttonText:指定触发按钮上显示的文本,showOn属性应设置为button或both

buttonImage:指定弹出按钮图像的URL,若设置则buttonText将成为alt值

buttonImageOnly:是否将图像放在控件后面,作为触发器,如果设置为true那么按钮将只剩下图片作为按钮,是页面更加美观

这里我编写三个文本框进行以上属性的对比:

1)      Js代码:

[javascript] view plaincopy

  1. $( "#datepicker2" ).datepicker({
  2. showOn: "both",
  3. buttonText:"日历按钮"
  4. });

效果截图:

2)将按钮设置为图片:

Js代码:

[javascript] view plaincopy

  1. $( "#datepicker" ).datepicker({
  2. showOn: "button",
  3. buttonImage: "images/calendar.gif",
  4. buttonImageOnly: true
  5. });

未设置buttonImageOnly属性的效果:

设置buttonImageOnly属性为true后:

通过以上对比,可以理解buttonImageOnly属性的作用。

、minDate:可以选择的最小日期,null表示无限制

maxDate:可以选择的最大日期。null表示无限制

两者都是根据以当天日期为基础的。

Js代码:

[javascript] view plaincopy

  1. $(function() {
  2. $( "#datepicker" ).datepicker({
  3. //表示以当天为准,只有在20天之前和10天之后的日期之间的时间可以选择
  4. minDate: -20,
  5. maxDate: "+10D"
  6. });
  7. });

如下图在7号之前都不可选择(当前日期为27):

[转]jQueryUI中Datepicker(日历)插件的介绍和使用的更多相关文章

  1. jQueryUI中Datepicker(日历)插件使用

    atepicker插件的属性: 属性 数据类型 默认值 说明 altField string "" 使用备用的输出字段,即将选择的日期 以另一种格式,输出到另一个控件中, 值为选择 ...

  2. jqueryUI之datepicker日历插件的介绍和使用

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件.我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.

  3. 如何使用jqueryUi的datepicker日历控件?

    参考: http://www.jb51.net/article/85007.htm 这里的日历控件是, 基于jquery的jqureyui中的一个 widget. 需要js 文件: 外部的js文件, ...

  4. jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题

    1.jqueryUI的datepicker的使用 -->首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI主题下载地址: -->下载后的文件 jquery- ...

  5. Jquery中的日历插件

    这个插件很简单:只需要在HTML代码中引入插件如下,CLASS名和click事件函数固定! <!doctype html> <html lang="en"> ...

  6. Bootstrap日期/日历插件Datepicker 时间加标记

    由于工作需要,项目中使用了Bootstrap日期/日历插件Datepicker,根据需求需要在其中添加日期标记,实现效果图如下: 特此记录此次解决方案: 1.首先分析了功能的DOM元素(如下图),可以 ...

  7. IDEA中的lombok插件安装以及各注解的详细介绍

    IDEA中的lombok插件安装以及各注解的详细介绍 其实对于我们来说, 写好实体类后,直接用快捷方式生成get,set方法,还有 构造方法就行了,但是对于字段比较多的, 如果修改一个属性的话,就要再 ...

  8. IDEA中的常用插件安装以及使用的介绍

    IDEA中的lombok插件安装以及各注解的详细介绍 Grep Console 当你密密麻麻一大片的日志,去查看起来,很容易看花眼:这个工具正好解决了这个痛点,可以说它就是 IDEA 自带 Conso ...

  9. 日历插件FullCalendar应用:(二)数据增删改

    接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...

随机推荐

  1. Bulma 源码结构

    源码基于 Bulma 0.4.0 版本. 一.入口文件 bulma.sass bulma.sass 是 Bulma 使用 SASS 编译的入口文件. sass bulma.sass css/bulma ...

  2. PHP中 Include 与 Require之间的区别

    *引入机制 如果没有给出目录(只有文件名)时则按照 include_path 指定的目录寻找.如果在 include_path 下没找到该文件则 include 最后才在调用脚本文件所在的目录和当前工 ...

  3. c#转 java学习笔记(原创)

    JDK开发人员用,JRE运行时环境(比如给客户安装,客户电脑需要装JRE) 当我们调用构造方法的时候系统会执行如下操作:1.给对象的属性分配空间,并且初始值 0 or null 2.给属性赋缺省值  ...

  4. Java50道经典习题-程序35 最大最小交换

    题目:输入数组,最大的与第一个元素交换,最小的与最后一个元素交换,输出数组.分析: 例如输入6 4 8 3 9 7 交换后输出9 4 8 7 6 3 import java.util.Arrays; ...

  5. 简单的linux service(linux服务)编写,运行示例

    1.写一个简单小程序 #include<stdio.h> #include<stdlib.h> int main(int argc,char **argv) { while(1 ...

  6. ubuntu安装hadoop经验

    安装环境: 1 linux系统 2 或(windows下)虚拟机 本文在linux系统ubuntu下尝试安装hadoop 安装前提 1 安装JDK(安装oracle公司的JDK ) (1)检查是否已安 ...

  7. Task4

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Python学习过程(五)

    这里记录下python怎么去和数据库打交道,也就是这么怎么去连接数据库,以及对数据库的操作,我这里用的sqlserver, 好了,首先当然是引入我们的模块包: import pymssql 猜的不错的 ...

  9. 10.18 NOIP2018提高组模拟题(二)

    大水题 1.咒语 (curse.pas/c/cpp) [题目描述] 亮亮梦到自己来到了魔法城堡,但一扇巨大的石门阻拦了他通向城堡内的路.正当他沮丧之际,突然发现门上有一处机关,机关上有一张很长的纸条. ...

  10. UVa 11292 勇者斗恶龙(The Dragon of Loowater)

    首先先看一下这道题的英文原版... 好吧,没看懂... 大体意思就是: 有一条n个头的恶龙,现在有m个骑士可以雇佣去杀死他,一个能力值为x的勇士可以砍掉直径不超过x的头,而且需要支付x个金币.如何雇佣 ...