README

======================================

主页

演示页面

项目分支

此项目是 bootstrap-datepicker项目 的分支。

主页

由于 'bootstrap-datepicker' 限制在日期范围（日、月、年），该项目旨在也支持时间选择（小时、分钟）。

屏幕截图

十年年视图

此视图允许选择所选月份中的日期。

年视图

此视图允许在所选年份中选择月份。

月视图

此视图允许在10年范围内选择年份。

日视图

此视图允许在所选日期中选择小时。

小时视图

此视图允许在所选小时中选择预设的分钟。默认情况下，已选择5分钟的范围以限制按钮数量在一个可接受的价值，但可以通过 minuteStep 属性重写。

日视图 - 子午线

子午线在日视图和小时视图中都受支持。要使用它，只需启用 showMeridian 属性。

小时视图 - 子午线

示例

附加到通过选项指定的格式的字段

<input type="text" value="2012-05-15 21:05" id="datetimepicker">

$('#datetimepicker').datetimepicker({
    format: 'yyyy-mm-dd hh:ii'
});

附加到通过标记指定的格式的字段

<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();

使用bootstrap-datetimepicker.js

通过javascript调用日期时间选择器

$('.datetimepicker').datetimepicker()

依赖项

需要bootstrap的dropdown组件（dropdowns.less）的一些样式，以及bootstrap的sprites（sprites.less和关联的图像）用于箭头。

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

$ lessc build/build_standalone.less > datetimepicker.css

选项

所有接受“日期”的选项都可以处理一个日期对象；按照给定格式格式化的字符串；或者相对于今天的时长，例如 '-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 : 带前导零的两位秒数
• i : 无前导零的分钟数
• ii : 带前导零的两位分钟数
• h : 无前导零的小时数 - 24小时制
• hh : 带前导零的两位小时数 - 24小时制
• H : 无前导零的小时数 - 12小时制
• HH : 带前导零的两位小时数 - 12小时制
• d : 月份中的天数，无前导零
• dd : 月份中的天数，带前导零的两位数
• m : 月份的数字表示，无前导零
• mm : 月份的数字表示，带前导零的两位数
• M : 月份的短文本表示，三个字母
• MM : 月份的全文本表示，例如一月或三月
• yy : 年份的两位数字表示
• yyyy : 年份的全数字表示，四位数字
• t : Unix 纪元时间戳
• Z : 时区名称的缩写

weekStart

整数。默认值：0

一周开始的日子。0（星期日）到 6（星期六）

startDate

日期。默认值：时间的开始

可能选择的最早日期；所有更早的日期都将被禁用。

endDate

日期。默认值：时间的结束

可能选择的最新日期；所有较晚的日期都将被禁用。

daysOfWeekDisabled

字符串，数组。默认值：''，[]

应禁用的星期天数。值是 0（星期日）到 6（星期六）。多个值应以逗号分隔。例如：禁用周末：'0,6' 或 [0,6]。

autoclose

布尔值。默认值：false

是否在选定日期后立即关闭日期时间选择器。

startView

数字，字符串。默认值：2，'month'

打开时日期时间选择器应显示的视图。接受以下值

• 0 或 'hour' 用于小时视图
• 1 或 'day' 用于日视图
• 2 或 'month' 用于月视图（默认值）
• 3 或 'year' 用于12个月概述
• 4 或 'decade' 用于10年概述。对出生日期日期时间选择器很有用。

minView

数字，字符串。默认值：0，'hour'

日期时间选择器应显示的最低视图。

maxView

数字，字符串。默认值：4，'decade'

日期时间选择器应显示的最高视图。

clearBtn

布尔值。默认值：false

如果为true，将在datetimepicker的底部显示“清除”按钮以清除当前选择。此外，如果自动关闭设置为true，则datetimepicker将关闭。

todayBtn

布尔值，"linked"。默认：false

如果为true或"linked"，将在datetimepicker的底部显示“今天”按钮以选择当前日期。如果为true，则“今天”按钮只会将当前日期移入视图；如果为"linked"，则当前日期也将被选中。

todayHighlight

布尔值。默认值：false

如果为true，则突出显示当前日期。

keyboardNavigation

布尔值。默认：true

是否允许通过箭头键进行日期导航。

language

字符串。默认：'en'

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

forceParse

布尔值。默认：true

是否在关闭选择器时强制解析输入值。也就是说，当用户在输入字段中留下无效日期时，选择器将强制解析该值，并将输入的值设置为新的、有效的日期，符合给定的格式。

bootcssVer

数字。

您可以使用此选项覆盖不同bootstrap版本（例如，2或3）的自动检测功能。

minuteStep

数字。默认：5

用于构建小时视图的增量。为每个minuteStep分钟创建一个按钮。

pickerReferer : 已弃用

字符串。默认：'default'

为组件实现放置选择器的引用元素。如果您想将选择器放置在输入字段下方，只需指定input。

pickerPosition

字符串。默认：'bottom-right'（支持值：'bottom-right', 'bottom-left', 'top-right', 'top-left'）

此选项允许在组件实现中将选择器放置在输入字段下方，而不是默认的按钮右下角位置。

viewSelect

数字或字符串。默认：与minView相同（支持值：'decade', 'year', 'month', 'day', 'hour'）

使用此选项可以从中选择日期选择的视图。默认为最后一个视图，但是您可以选择第一个视图，这样每次点击都会更新日期。

showMeridian

布尔值。默认值：false

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

initialDate

日期或字符串。默认：new Date()

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

zIndex

数字。默认：未定义

zIndex值将根据DOM树自动计算，其中我们寻找最高值。要跳过此过程，您可以手动设置值。

timezone

字符串。默认：客户端当前时区的缩写名

您可以让查看器显示给定时区的日期。请注意，这必须与Z格式选项一起使用。以下为示例

$('#date-end').datetimepicker({
        format: 'yyyy-mm-dd hh:ii P Z'
        timezone: 'GMT'
    });

onRenderYear

当日期选择器内渲染年份时，将触发此事件。应返回要添加到此元素的类数组。返回['disabled']以禁用选择此天。

$('#date')
    .datetimepicker({
        onRenderYear: function(date) {
            //Disable picking dates from any year apart from 2015/2016
            if (date.getFullYear() < 2015 || date.getFullYear() > 2016)
                return ['disabled']
        }
    });

onRenderMonth

当日期选择器内渲染月份时，将触发此事件。应返回要添加到此元素的类数组。返回['disabled']以禁用选择此天。

$('#date')
    .datetimepicker({
        onRenderMonth: function(date) {
            //Disable every other month in the year 2016
            if (date.getUTCMonth() % 2 === 0 && date.getUTCFullYear() === 2016)
                return ['disabled']
        }
    });

onRenderDay

当日期选择器内渲染天数时，将触发此事件。应返回要添加到此元素的类数组。返回['disabled']以禁用选择此天。

$('#date')
    .datetimepicker({
        onRenderDay: function(date) {
            //Disable dates 18-24 of every month
            if (date.getDate() >= 18 && date.getDate() <= 24)
                return ['disabled'];
        }
    });

onRenderHour

当日期选择器内渲染小时时，将触发此事件。应返回要添加到此元素的类数组。返回['disabled']以禁用选择此天。

$('#date')
    .datetimepicker({
        onRenderHour: function(hour) {
            //Disable any time between 12:00 and 13:59
            if (date.getUTCHours() === 12 || date.getUTCHours() === 13)
                return ['disabled'];
        }
    });

onRenderMinute

当日期选择器内渲染分钟时，将触发此事件。应返回要添加到此元素的类数组。返回['disabled']以禁用选择此天。

$('#date')
    .datetimepicker({
        onRenderMinute: function(minute) {
            //Disable all times between 30 past and 20 to every hour for workdays
            if (date.getDay() !== 0 && date.getDay() !== 6 && date.getUTCMinutes() >= 30 && date.getUTCMinutes() <= 40)
                return ['disabled'];
        }
    });

fontAwesome

布尔值。默认值：false

如果为true，则将使用Font Awesome。

Markup

格式化为组件。

<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)

初始化datetimepicker。

remove

参数：无

移除datetimepicker。移除附加事件、内部附加对象和添加的HTML元素。

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

show

参数：无

显示datetimepicker。

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

hide

参数：无

隐藏datetimepicker。

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

update

参数

• currentDate (Date)。

使用指定的日期更新datetimepicker。

$('#datetimepicker').datetimepicker('update', new Date());

省略currentDate以使用当前输入值更新datetimepicker。

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

setStartDate

参数

• startDate (String)

设置datetimepicker的新下限日期。

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

省略startDate（或提供其他假值）以取消限制。

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

setEndDate

参数

• endDate (String)

为日期选择器设置新的上限日期。

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

省略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);

setMinutesDisabled

参数

• minutesDisabled (String|Array)

设置应禁用的分钟。

$('#datetimepicker').datetimepicker('setMinutesDisabled', [25,59]);

省略minutesDisabled（或提供其他假值）来取消禁用分钟。

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

setHoursDisabled

参数

• hoursDisabled (String|Array)

设置应禁用的小时。

$('#datetimepicker').datetimepicker('setHoursDisabled', [12,19]);

省略hoursDisabled（或提供其他假值）来取消禁用小时。

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

setInitialDate

参数

• setInitialDate (String)

为日期选择器设置新的初始日期。

$('#datetimepicker').datetimepicker('setInitialDate', '2012-12-31');

获取日期选择器上的初始日期。

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

事件

日期选择器类公开了一些事件，用于操作日期。

show

当日期选择器显示时触发。

hide

当日期选择器隐藏时触发。

changeDate

当日期改变时触发。

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

changeYear

当从十年视图更改视图年份时触发。

changeMonth

当从年视图更改视图月份时触发。

outOfRange

当您选择的日期在startDate之前或在endDate之后，或者当您通过setDate或setUTCDate方法指定日期时触发。

next:* / prev:*

当您点击next或previous箭头时触发。支持所有不同的视图模式（'year', 'month', 'day', 'hour'）。例如，允许您将回调绑定到'next:month'或'prev:month'操作。

键盘支持

日期选择器包含一些键盘导航。

上、下、左、右箭头键

单独使用时，左/右将向后/向前移动一天，上/下将向后/向前移动一周。

使用shift键时，上/左将向后移动一个月，下/右将向前移动一个月。

使用ctrl键时，上/左将向后移动一年，下/右将向前移动一年。

Shift+ctrl的行为与ctrl相同--即它不会同时更改月份和年份，只更改年份。

escape

可以使用escape键来隐藏和重新显示日期选择器；如果用户想手动编辑值，则这是必要的。

enter

当选择器可见时，enter将简单地隐藏它。当选择器不可见时，enter将具有正常效果--提交当前表单等。

鼠标滚轮视图导航

为了使此插件更容易设置不同部分的日期时间，使用了鼠标滚轮来在不同视图之间导航。向上滚动鼠标滚轮可导航到十年视图。向下滚动将进入分钟视图。

依赖关系

为了启用此功能，必须在使用此功能之前包含jQuery鼠标滚轮插件。

选项

wheelViewModeNavigation

布尔值。默认值：false

是否启用使用鼠标滚轮在不同视图模式之间导航。

wheelViewModeNavigationInverseDirection

布尔值。默认值：false

是否反转滚动方向。默认为向上滚动到十年视图。

wheelViewModeNavigationDelay

整数。默认值：100

对滚轮命令的下一个响应之间的时间延迟，它控制在不同视图之间切换的速度。单位为百万秒。

关于viewSelect选项

当此功能启用时，viewSelect选项的推荐值是4。这意味着您可以轻松更新每个视图中的任何值。此选项值应用于演示页面。

功能演示

提供了一个简单的演示页面，以展示其简单理念。

I18N

此插件支持月份和星期的国际化以及weekStart选项。默认为英语('en')；其他可用的翻译在js/locales/目录中，只需在插件之后包含所需的语言即可。要添加更多语言，只需在调用.datetimepicker()之前向$.fn.datetimepicker.dates添加一个键。例如

$.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"
};

您可以使用format属性在语言配置中覆盖默认日期格式。例如

$.fn.datetimepicker.dates['pt-BR'] = {
    format: 'dd/mm/yyyy'
};

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

如果您的浏览器（或用户的浏览器）显示字符错误，那么浏览器可能是以非Unicode编码加载javascript文件的。只需在您的script标签中添加charset="UTF-8"即可。

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