代码改变世界

jQuery UI Datepicker精美的日期选择组件

2012-12-08 16:05 by 囧月, ... 阅读, ... 评论, 收藏, 编辑

日期选择组件在日常开发中使用还是非常广泛的,jQuery UI Datepicker作为jQuery UI的日期选择组件,不仅使用灵活、主题丰富多样,更因为日常普遍使用jQuery,所以是一个不错的选择。

相关资源引用

http://jqueryui.com/download/下载相应的脚本及样式,可以下载全部或者选择需要的进行下载;另外还可以到http://github.com/jquery/jquery-ui下载它的所有源码。

对于在中文的呈现,还需要额外的一个脚本:https://github.com/jquery/jquery-ui/blob/master/ui/i18n/jquery.ui.datepicker-zh-CN.js

由于jQuery UI使用了em作为单位,直接在网页中使用,会变得巨大无比,所以需要额外附加一点样式(这里命名为jqueryui-fakes.css):

body { font-size: 12px; }
.ui-widget { font-size: 1em; }
.ui-datepicker { font-size: 11px; }
  .ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month { width: auto; }

最终引入的资源如下:

<link href="css/jquery-ui/cupertino/jquery-ui-1.9.0.custom.min.css" rel="stylesheet" />
<link href="css/jqueryui-fakes.css" rel="stylesheet" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery-ui-1.9.0.custom.min.js"></script>
<script src="js/jquery.ui.datepicker-zh-CN.min.js"></script>

使用方法

jQuery UI Datepicker使用非常简单,首先在页面中有文本框作为目标:

<input type="text" name="lwme" class="dp" />

默认情况下只需要在DOMLoaded调用datepicker方法即可:

$(function() {
  $(".dp").datepicker();
});

使文本框只读

这里需要注意,如果文本框不允许输入的话,需要设置readonly属性:

  $(".dp").prop("readOnly", true).datepicker();

另外还需要注意,如非必要,不要直接在文本框的html属性上设置readonly(特别是asp.net TextBox),否则后台可能不能正常获取。

控制输入的字符

开启constrainInput属性,就可以控制文本框的输入只能为dateFormat属性中规定的(没启用readonly情况下):

  $(".dp").datepicker({ constrainInput: true });

显示年、月选择框

默认情况下选择年、月比较麻烦,这里可以开启两个属性是年、月变为下拉框选择:

  $(".dp").datepicker({ changeMonth: true, changeYear: true });

另外还可以把年下拉框显示在月下拉框之前:

  $(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true });

设置选择的年的范围,可以是具体的年份或者是特定的格式:

  1. "-nn:+nn"相对于当前年份,当前2012年,如"-5:+5"就是从2007-2017范围

  2. "c-nn:c+nn"相对于选中的年份,如选中2013,"c-5:c+5"就是从2008-2018范围

  3. "nnnn:nnnn"直接指定年份,如"2010-2013"

 $(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "-5:+5" });
 $(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "c-5:c+5" });
 $(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "2010:2013" });

显示日期的格式

通过设置dateFormat属性来实现,分别用yy、mm、dd来表示年、月、日;默认值为mm/dd/yy,中文环境下一般设置为:

  $(".dp").datepicker({ dateFormat: "yy-mm-dd" });

控制日期范围

通过minDate/maxDate来设置可以选择的日期范围,可以是日期类型;

或者是特定的格式,使用三个字符来表示:

  1. 第一个字符为+或-
  2. 第二个字符为数字
  3. 第三个字符表示单位如y,m,w,d表示年、月、周、天,可以拼出N中结果如:"+1y" "-1m"
  4. 而且可以叠加,只要中间空格隔开即可如:"+1m +1w +2d"表示一个月+一周+两天
  $(".dp").datepicker({ maxDate: "+1m +1w +1d", minDate: "-1d" });
  $(".dp").datepicker({ maxDate: new Date(2012,12,21), minDate: new Date(2012,12,08) });

显示今天及确定按钮

  $(".dp").datepicker({ showButtonPanel: true });

还可以设置点击今天调到当前月份的日历视图:

  $(".dp").datepicker({ showButtonPanel: true, gotoCurrent: true });

其他属性就不再一一展示了,请直接看官方API文档:http://api.jqueryui.com/datepicker/

选择时间功能

jQuery UI Datepicker没有提供选择时间功能,不过有人基于jQuery UI Datepicker创造了timepicker:http://trentrichardson.com/examples/timepicker/

可以从https://github.com/trentrichardson/jQuery-Timepicker-Addon获取它的最新版本

资源引入

除了需要引入上面jQuery UI Datepicker使用的资源以外,还需要一下资源:

<link href="js/timepicker-addon/jquery-ui-timepicker-addon.css" rel="stylesheet" />
<script src="js/timepicker-addon/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/timepicker-addon/jquery-ui-timepicker-zh-CN.min.js"></script>

使用方法

它的功能分为两部分:一种是可以同时选择日期和时间的datetimepicker,另一种是只能选时间的timepicker

  $(".dp").datetimepicker();
  $(".dp").timepicker();

参数设置

它也有自己的一些参数可以设置,这里仅列出重要的:

  1. timeFormat 设置时间格式,其中两个相同字母的表示不足两位补0
    1. H/HH:24小时
    2. h/hh:12小时
    3. m/mm:分钟
    4. s/ss:秒钟
    5. l:毫秒
    6. t/tt,T/TT:设置AM/PM即上午/下午
    7. z:失去
  2. defaultTimezone:默认时区"+0000"
  3. showHour/showMinute/showSecond/…showTimezone/showTime分别设置是否显示相应选择
  4. stepHour/stepMinute/StepSecond…分别设置拖动滑块时增减的数值
  5. maxDateTime/minDateTime:控制时间范围
  6. controlType:控件类型:"select"(下拉选择)、"slide"(拖动滑块,默认)

格式化输入

有时候可能会需要可以选择也可以输入,这时候可以额外附加脚本:http://www.meiocodigo.com/projects/meiomask/或者是其他有mask功能的组件

定义好mask格式:

$(".dp").datepicker().setMask("9999-19-39")

over