@activix/bootstrap-datetimepicker 中文文档教程

Question

# Project : bootstrap-datetimepicker

主页

演示页面

Project forked

这个项目是 bootstrap-datepicker 项目的一个分支.

Home

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

Screenshots

Decade year view

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

Year view

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

Month view

此视图允许选择 10 年范围内的年份.

Day view

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

Hour view

此视图允许选择所选小时内的分钟预设. 已选择 5 分钟的范围（默认情况下）以将按钮数量限制为可接受的值，但它可以被 minuteStep 属性覆盖。

Day view - meridian

日视图

和小时视图均支持 Meridian。 要使用它，只需启用 showMeridian 属性。

Hour view - meridian

Example

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

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

Using bootstrap-datetimepicker.js

通过 javascript 调用日期

$('.datetimepicker').datetimepicker()

Dependencies

时间选择器：某些样式需要引导程序的下拉组件（dropdowns.less），以及引导程序的精灵（sprites.less 和相关图像）用于箭头。

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

$ lessc build/build_standalone.less > datetimepicker.css

Options

所有​​选项取一个“Date”可以处理一个Date对象； 根据给定的 format 格式化的字符串； 或相对于今天的时间增量，例如“-1d”、“+6m +1y”等，其中有效单位为“d”（天）、“w”（周）、“m”（月）和“y” ' （年）。

您还可以指定一个 ISO-8601 有效日期时间，尽管给定 format :

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

format

String。 默认值：'mm/dd/yyyy'

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

• p : meridian in lower case ('am' or 'pm') - according to locale file
• P : meridian in upper case ('AM' or 'PM') - according to locale file
• s : seconds without leading zeros
• ss : seconds, 2 digits with leading zeros
• i : minutes without leading zeros
• ii : minutes, 2 digits with leading zeros
• h : hour without leading zeros - 24-hour format
• hh : hour, 2 digits with leading zeros - 24-hour format
• H : hour without leading zeros - 12-hour format
• HH : hour, 2 digits with leading zeros - 12-hour format
• d : day of the month without leading zeros
• dd : day of the month, 2 digits with leading zeros
• m : numeric representation of month without leading zeros
• mm : numeric representation of the month, 2 digits with leading zeros
• M : short textual representation of a month, three letters
• MM : full textual representation of a month, such as January or March
• yy : two digit representation of a year
• yyyy : full numeric representation of a year, 4 digits
• t : unix epoch timestamp
• Z : abbreviated timezone name

weekStart

整数。 默认值：0

星期几开始。 0（星期日）到 6（星期六）

startDate

日期。 默认值：开始时间

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

endDate

日期。 默认值：结束时间

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

daysOfWeekDisabled

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

应该禁用的星期几。 值为 0（星期日）到 6（星期六）。 多个值应以逗号分隔。 示例：禁用周末：'0,6' 或 [0,6]。

autoclose

布尔值。 默认值：false

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

startView

数字，字符串。 默认值：2，“月”

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

• 0 or 'hour' for the hour view
• 1 or 'day' for the day view
• 2 or 'month' for month view (the default)
• 3 or 'year' for the 12-month overview
• 4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.

minView

数字、字符串。 默认值：0，“小时”

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

maxView

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

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

clearBtn

布尔值。 默认值：false

如果为 true，则在日期时间选择器的底部显示一个“清除”按钮以清除当前选择。 此外，如果 autoclose 设置为 true，则 datetimepicker 将被关闭。

todayBtn

布尔值，“链接”。 默认值：false

如果为 true 或“已链接”，则在日期时间选择器底部显示一个“今天”按钮以选择当前日期。 如果为 true，“今天”按钮只会将当前日期移动到视图中； 如果“链接”，当前日期也将被选中。

todayHighlight

布尔值。 默认值：false

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

keyboardNavigation

布尔值。 默认值：true

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

language

细绳。 默认值：'en'

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

forceParse

布尔值。 默认值：true

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

bootcssVer

数字。

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

minuteStep

数字。 默认值：5

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

pickerReferer : deprecated

细绳。 默认值：'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

编号。 Default: undefined

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>

Methods

.datetimepicker(options)

初始化一个日期时间选择器。

remove

参数： 无

删除日期时间选择器。 删除附加事件、内部附加对象和 添加了 HTML 元素。

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

showDatetimePicker

参数： 无

显示日期时间选择器。

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

hideDatetimePicker

参数： 无

隐藏日期时间选择器。

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

update

参数：

• currentDate (Date).

使用指定日期更新日期时间选择器。

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

省略 currentDate 以使用当前输入值更新日期时间选择器。

$('#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-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');

Events

Datetimepicker 类公开了一些用于操作日期的事件。

showDatetimePicker

显示日期选择器时触发。

hideDatetimePicker

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

changeDate

日期更改时触发。

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

changeYear

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

changeMonth

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

outOfRange

当您选择一个早于 startDate 或晚于 endDate 的日期，或者您通过 setDate 或 setUTCDate< 方法指定日期时触发/em>..

next:* / prev:*

当您单击下一个 或上一个 箭头时触发。 支持所有不同的视图模式（“年”、“月”、“日”、“小时”）。 例如，允许您将回调绑定到 'next:month' 或 'prev:month' 操作。

Keyboard support

日期时间选择器包括一些键盘导航：

up, down, left, right arrow keys

就其本身而言，向左/向右将向后/向前移动一天，向上/向下将向后/向前移动一周。

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

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

Shift+ctrl 的行为与 ctrl 相同——也就是说，它不会同时更改月份和年份，只会更改年份。

escape

转义键可用于隐藏和重新显示日期时间选择器； 如果用户想要手动编辑值，这是必需的。

enter

When the picker is visible, enter will simply hide it. When the picker is not visible, enter will have normal effects -- submitting the current form, etc.

Mouse Wheel View Navigation

In order to make this plugin easier to set different part of date time, mouse wheel has been used to navigate through different views. 向上滚动鼠标滚轮以导航至十年视图。 向下滚动将导致分钟视图。

Dependency

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

Options

wheelViewModeNavigation

布尔值。 默认值：false

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

wheelViewModeNavigationInverseDirection

布尔值。 默认值：false

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

wheelViewModeNavigationDelay

整数。 默认值：100

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

About viewSelect option

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

Feature Demo

一个简单的Demo页面来展示它的简单想法。

I18N

该插件支持 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 文件。 只需将 charset="UTF-8" 添加到您的 script 标签：

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