日期时间选择器

Bootstrap日期和时间表单组件。

此项目是bootstrap-datetimepicker 项目的一个分支,原项目不支持Time选择。
其它部分也进行了改进、增强,例如load过程增加了对 ISO-8601 日期格式的支持。
文档是拷贝/粘贴字原项目的文档,并且加入了更多细节说明。
别犹豫了,下载下来试试吧 !
此地址可以克隆或fork本项目
git clone git://github.com/smalot/bootstrap-datetimepicker.git

希望这个小小的项目能帮到你 !


Tags:twitter-bootstrap, datetime, picker, component, javascript, widget

十年视图

Decade view

年视图

Year view

月视图

Month view

日视图*

Day view

小时视图*

Hour view

Day view w/ meridian *

Day view - meridian

Hour view w/ meridian *

Hour view - meridian
(*)添加了用于选择时间部分的视图。.

需要bootstrap的下拉菜单组件 (dropdowns.less) 的某些样式,还有bootstrap的sprites (sprites.less and associated images) 中的箭头图标。

通过lessc编译器运行build/build_standalone.less,可以生成一个独立的.css文件(包括必要的下拉样式和可选的基于文本的箭头):

$ lessc build/build_standalone.less datetimepicker.css

采用“Date”的所有选项都可以处理Date对象; 根据给定格式format的字符串; 或者相对于今天的timedelta,例如'-1d','+ 6m + 1y'等,其中有效单位是'd'(天),'w'(星期),'m'(月)和'y ' (年)。

您也可以指定ISO-8601有效日期时间,尽管给定格式:

  • yyyy-mm-dd
  • yyyy-mm-dd hh:ii
  • yyyy-mm-ddThh:ii
  • yyyy-mm-dd hh:ii:ss
  • yyyy-mm-ddThh:ii:ssZ

格式

默认字符: 'mm/dd/yyyy'

日期格式,p,P,h,hh,i,ii,s,ss,d,dd,m,mm,M,MM,yy,yyyy的任意组合。

  • p : 小写子午线('am'或'pm') - 根据语言环境文件
  • P : 大写子午线('AM'或'PM') - 根据语言环境文件
  • s : 没有前导零的秒数
  • ss : 秒,带前面零的2位数字
  • i : 分钟没有前导零
  • ii : 分钟,带前导零的2位数字
  • h : 没有前导零的小时 - 24小时格式
  • hh : 小时,2位数字,带前导零 - 24小时格式
  • H : 没有前导零的小时 - 12小时格式
  • HH : 小时,带前导零的2位数 - 12小时格式
  • d : 没有前导零的月份的某一天
  • dd : 每月的某一天,带有前导零的2位数字
  • m : 没有前导零的月份的数字表示
  • mm : 月份的数字表示,带前导零的2位数字
  • M : 短文本表示一个月,三个字母
  • MM : 一个月的全文表示,例如1月或3月
  • yy : 一年两位数的代表
  • yyyy : 一年的完整数字表示,4位数

weekStart

Integer. 默认值:0

一周从哪一天开始。0(星期日)到6(星期六)

startDate

Date. 默认值:开始时间

可以选择的最早日期; 所有较早的日期都将被禁用。

endDate

Date. 默认值:结束时间

可以选择的最新日期; 所有以后的日期都将被禁用。

daysOfWeekDisabled

String, Array. 默认值: '', []

应该禁用的星期几。 值为0(星期日)至6(星期六)。 多个值应以逗号分隔。 示例:禁用周末:'0,6'[0,6]

autoclose

Boolean. 默认值:false

是否在选择日期时立即关闭datetimepicker。

startView

Number, String. 默认值:2, 'month'

datetimepicker在打开时应显示的视图。接受以下值:

  • 0 或 'hour' 小时视图
  • 1 或 'day' 日视图
  • 2 或 'month' 月份视图(默认值)
  • 3 或 'year' 为期12个月的概述
  • 4 或 'decade' 对于10年的概述。 适用于出生日期datetimepickers。

minView

Number, String. 默认值:0, 'hour'

datetimepicker应显示的最低视图。

maxView

Number, String. 默认值:4, 'decade'

datetimepicker应显示的最高视图。

todayBtn

Boolean, "linked". 默认值: false

如果为true或“linked”,则在datetimepicker底部显示“今日”按钮以选择当前日期。 如果为true,则“今日”按钮仅将当前日期移动到视图中; 如果“linked”,则还将选择当前日期。

todayHighlight

Boolean. 默认值: false

如果为true, 高亮当前日期。

keyboardNavigation

Boolean. 默认值: true

是否允许通过方向键改变日期。

language

String. 默认值: 'en'

用于月份和日期名称的语言的双字母代码。 这些也将用作输入的值(并在表单提交的情况下随后发送到服务器)。 目前有英语('en'),德语('de'),巴西语('br')和西班牙语('es')翻译,但可以添加其他语言(见下面的I18N)。 如果给出了未知的语言代码,将使用英语。

forceParse

Boolean. 默认值: true

当选择器关闭的时候,是否强制解析输入框中的值。也就是说,当用户在输入框中输入了不正确的日期,选择器将会尽量解析输入的值,并将解析后的正确值按照给定的格式format设置到输入框中。

minuteStep

Number. 默认值: 5

此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间(分钟)用于选择。

pickerReferer : deprecated

String. 默认值: 'default' (其他可用值: 'input')

referer元素,用于为组件实现放置选择器。 如果要将选择器放在输入字段下,只需指定input

pickerPosition

String. 默认值: 'bottom-right' (还支持 : 'bottom-left')

此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方。

viewSelect

Number 或 String。 默认值:same as minView(支持的值为:'decade','year','month','day','hour')

使用此选项,您可以选择从中选择日期的视图。 默认情况下,它是最后一个,但您可以选择第一个,因此每次点击都会更新日期。

showMeridian

Boolean. 默认值: false

此选项将启用日视图和小时视图的子午线视图。

initialDate

Date or String. 默认值: new Date()

您可以使用日期初始化查看器。 默认情况下,它现在是,因此您可以指定昨天或今天午夜...

组件模版。

<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                    <input class="span2" size="16" type="text" value="12-02-2012">
                    <span class="add-on"><i class="icon-th"></i></span>
                </div>

带有重置按钮(用于清空输入框)的组件模版。

<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                    <input class="span2" size="16" type="text" value="12-02-2012">
                    <span class="add-on"><i class="icon-remove"></i></span>
                    <span class="add-on"><i class="icon-th"></i></span>
                </div>

.datetimepicker(options)

初始化日期时间选择器。

remove

参数: None

移除日期时间选择器。同时移除已经绑定的event、内部绑定的对象和HTML元素。

$('#datetimepicker').datetimepicker('remove');

show

参数: None

显示日期时间选择器。

$('#datetimepicker').datetimepicker('show');

hide

参数: None

隐藏日期时间选择器。

$('#datetimepicker').datetimepicker('hide');

update

参数: None

使用当前输入框中的值更新日期时间选择器。

$('#datetimepicker').datetimepicker('update');

setStartDate

参数:

  • startDate (String)

给日期时间选择器设置一个新的起始日期。

$('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');

省略startDate(或提供其他假值)以取消设置限制。

$('#datetimepicker').datetimepicker('setStartDate');
                $('#datetimepicker').datetimepicker('setStartDate', null);

setEndDate

参数:

  • endDate (String)

给日期时间选择器设置结束日期。

$('#datetimepicker').datetimepicker('setEndDate', '2012-01-01');

省略endDate(或提供其他假值)以取消设置限制。

$('#datetimepicker').datetimepicker('setEndDate');
                $('#datetimepicker').datetimepicker('setEndDate', null);

setDaysOfWeekDisabled

参数:

  • daysOfWeekDisabled (String|Array)

设置应禁用的星期几。

$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', [0,6]);

省略daysOfWeekDisabled(或提供其他假名值)以取消设置已禁用的日期。

$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled');
                $('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', null);

Datetimepicker 类暴露了一组event用以对日期进行操作。

show

当选择器显示时被触发。

hide

当选择器隐藏时被触发。

changeDate

当日期被改变时被触发。

$('#date-end')
                .datetimepicker()
                .on('changeDate', function(ev){
                    if (ev.date.valueOf() < date-start-display.valueOf()){
                        ....
                    }
                });
                            

changeYear

当十年视图上的年视图view被改变时触发。

changeMonth

当年视图上的月视图view被改变时触发。

outOfRange

当用户选择的日期超出startDateendDate 时,或者通过setDatesetUTCDate方法设置日期超出范围时被触发。

日期时间选择器提供了键盘导航:

up, down, left, right 方向键

这些方向键中,left/right 向后/向前 一天,up/down 向后/向前 一周。

配合shift键,up/left 向后退一个月,down/right 向前进一个月。

配置ctrl键,up/left 向后退一年,down/right 向前进一年。

Shift+ctrl 和 ctrl 同等效果 - 也就是说,他们不能同时改变月和年,只能单独改变年。

escape

escape 键可以用来隐藏、重新显示日期时间选择器;当用户希望手工编辑输入框中的值是会很有用。

enter

当选择器处于显示状态时,enter键只是将其隐藏。当选择器处于隐藏状态时,enter键发挥通常的功能 - 提交当前表单,或者其他。

本插件支持月、每周中天的名称、weekStart选项的国际化。默认是语言是English ('en');其它可以使用的翻译文件在js/locales/ 目录中,只需在本插件之后引入需要的语言文件即可。需要增加额外语言支持的话,只需向 $.fn.datetimepicker.dates中增加一个key即可,一定要放在调用 .datetimepicker()之前。如下案例:

$.fn.datetimepicker.dates['en'] = {
                    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
                    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
                    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    today: "Today"
                };

从右到左的语言也可以包含rtl:true以使日历显示得当。

如果您的浏览器(或您的用户)显示错误的字符,浏览器可能正在使用非unicode编码加载javascript文件。 只需在脚本标记中添加charset =“UTF-8”

<script type="text/javascript" src="bootstrap-datetimepicker.de.js" charset="UTF-8"></script>
                

绑定输入框,并设置format选项:

<input type="text" value="2012-05-15 21:05" id="datetimepicker">
$('#datetimepicker').datetimepicker({
                    format: 'yyyy-mm-dd hh:ii'
                });

绑定输入框,并设置format标记:

<input type="text" value="2012-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">
$('#datetimepicker').datetimepicker();

作为组件使用:

<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                    <input size="16" type="text" value="12-02-2012" readonly>
                    <span class="add-on"><i class="icon-th"></i></span>
                </div>
$('#datetimepicker').datetimepicker();

作为内联日期时间选择器:

<div id="datetimepicker"></div>
$('#datetimepicker').datetimepicker();