# @foxythemes/bootstrap-datetime-picker-bs4 中文文档

规范地址：https://npmcn.com/package/%40foxythemes/bootstrap-datetime-picker-bs4/

版本：2\.3\.5
npm 元数据更新时间：2022-04-05T12:10:49.197Z
中文译文更新时间：2026-11-15T10:58:04.018Z
软件包许可：Apache 2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40foxythemes/bootstrap-datetime-picker-bs4
原文对照：https://npmcn.com/package/%40foxythemes/bootstrap-datetime-picker-bs4/?lang=original
项目主页：http://www.malot.fr/bootstrap-datetimepicker/
源码仓库：https://github.com/smalot/bootstrap-datetimepicker

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：414 kB，77 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2018-07-29T19:14:27.350Z
- 最新版本发布：2018-09-29T02:16:49.096Z
- 近 30 天下载量：2544（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

基于 twitter 靴子的取时器部件

## 安装

```sh
npm install @foxythemes/bootstrap-datetime-picker-bs4
```

也可以使用：`pnpm add @foxythemes/bootstrap-datetime-picker-bs4`、`yarn add @foxythemes/bootstrap-datetime-picker-bs4`、`bun add @foxythemes/bootstrap-datetime-picker-bs4`

## README

# 项目:靴子-日期选择器

\======================================

[![Build Status](https://travis-ci.org/smalot/bootstrap-datetimepicker.svg?branch=master)](https://travis-ci.org/smalot/bootstrap-datetimepicker)

[主页](http://www.malot.fr/bootstrap-datetimepicker/)

[演示页](http://www.malot.fr/bootstrap-datetimepicker/demo.php)

# 项目叉

这个项目是一个叉子 [拖网-取日期项目](https://github.com/eternicode/bootstrap-datepicker)。 。 。 .

# 内容

由于“bootstrap-date pickers”仅限于日期范围(日、月、年),该项目也旨在支持时间选择(小时、分钟).

# 截图

## 十年展望

![Datetimepicker decade year view](https://raw.github.com/smalot/bootstrap-datetimepicker/master/screenshot/standard_decade.png)

此视图允许选择选定月份的天数 .

## 年视图

![Datetimepicker year view](https://raw.github.com/smalot/bootstrap-datetimepicker/master/screenshot/standard_year.png)

此视图允许选择选定年份的月份 .

## 月视图

![Datetimepicker month view](https://raw.github.com/smalot/bootstrap-datetimepicker/master/screenshot/standard_month.png)

此视图允许在10年内选择年份.

## 日视

![Datetimepicker day view](https://raw.github.com/smalot/bootstrap-datetimepicker/master/screenshot/standard_day.png)

此视图允许选择选定日中的小时 .

## 小时视图

![Datetimepicker hour view](https://raw.github.com/smalot/bootstrap-datetimepicker/master/screenshot/standard_hour.png)

此视图允许选择选定小时的分钟预设 . 选择了5分钟(默认情况下)的范围,以将按钮数量限制在可接受的数值范围内,但可以用 `minuteStep` 属性.

## 日景 - 中风

![Datetimepicker day view meridian](https://raw.github.com/smalot/bootstrap-datetimepicker/master/screenshot/standard_day_meridian.png)

日视和小时视都支持Meridian. 要使用它,只要让 `showMeridian` 属性.

## 小时视图 - 中线

![Datetimepicker hour view meridian](https://raw.github.com/smalot/bootstrap-datetimepicker/master/screenshot/standard_hour_meridian.png)

# 示例

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

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

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

附加于带有通过标记指定格式的字段 :

```html
<input type="text" value="2012-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">
```

```javascript
$('#datetimepicker').datetimepicker();
```

作为组件 :

```html
<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>
```

```javascript
$('#datetimepicker').datetimepicker();
```

作为线性时间选择器 :

```html
<div id="datetimepicker"></div>
```

```javascript
$('#datetimepicker').datetimepicker();
```

# 使用拖带约会时间选择器。js

通过 Javascript 给采集日期的人打电话:

```javascript
$('.datetimepicker').datetimepicker()
```

## 依赖关系

需要靴子的下拉组件(`dropdowns.less`对于一些风格,和靴子的宝石(`sprites.less` 和相关图像)用于箭头.

可以通过运行生成独立的.cs文件(包括必要的下拉样式和替代的以文本为基础的箭头) `build/build_standalone.less` 通过 `lessc` 编译器 :

```bash
$ lessc build/build_standalone.less datetimepicker.css
```

## 选项

使用“ 日期” 选项可以处理 `Date` 对象; 按照给定的格式排列字符串 `format`;或相对于今天的时间delta, 如"-1d","+6m+1y"等, 其中有效单位为"d"(日),"w"(周),"m"(月)和"y"(年).

您也可以指定 ISO- 8601 的有效日期,尽管给定的时间 `format` 数字 :

-   yyy-mm-dd (英语)
-   yyy-mm-dd 小时:ii
-   yyy-mm-ddh:ii (英语)
-   yyy-mm-dd hh:ii: ss (英语)
-   yyy-mm-ddTh:ii:ssZ (英语:

### 格式

弦乐 默认 : 'mm/dd/yyyy'

日期格式,组合为p,P,h,h,i,ii,s,s,d,d,m,mm,M,MM,yy,yyy.

-   p: 小写 ('am' 或'pm' ) 的介词 - 根据地语文件
-   P : 大写相 ( “ AM ” 或 “ PM ” ) - 根据 locale 文件
-   s: 不带正数的秒
-   ss : 秒, 2 位数, 以 0 为首
-   i: 分钟后不显示0
-   (二) 分钟, 2 个数字, 以 0 为首
-   h: 小时不带0 - 24小时格式
-   hh : 小时, 2 位数, 以 0 为首 - 24小时格式
-   H: 小时不导向零 - 12小时格式
-   HH : 小时, 2 个数字, 以 0 为首 - 12 小时格式
-   d:月日无正数
-   dd: 月日, 2个数字, 以0为首
-   m: 月的数值表示法,不带正数
-   mm: 月份的数值表示法, 2 位数字, 以 0 为首
-   M:一个月的简短文字表述,三个字母
-   MM: 1月或3月的全文代表
-   yy: 2位数字代表一年
-   yyyy : 全年数字代表, 4位数

### 每周开始

整数. 默认: 0

周从一出. 0(星期天)至6(星期六)

### 开始日期

约会 默认: 时间开始

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

### 结束日期

约会 默认: 时间结束

可能选择的最近日期; 以后所有日期将被禁用 .

### 周发残疾的日子

弦,阵列. 默认: '', \[\]

应作残行之周日. 值为0(星期日)至6(星期六). 多个值应当以逗号分隔. 示例: 禁用周末: `'0,6'` 或者说 `[0,6]`。 。 。 .

### 自动关闭

布尔. 默认: 假

选择日期时是否立即关闭取日期器 .

### 开始查看

号码,字符串。 默认 : 2, “ 月 ”

摘取日期者应显示何时打开. 接受以下数值:

-   0 小时或小时视图
-   1 日或日视图
-   2 或月视图的 “ 月 ” (默认)
-   3年或“年份”12个月概览
-   4或"十年"为"十年概览". 对定出日期的选手有用.

### 分钟

号码,字符串。 默认: 0, '小时'

取日期者应显示的最低视图 .

### 最大视图

号码,字符串。 默认: 4, “十年”

摘取日期者应显示的最高视图.

### 今天Btn 时间

布尔,"链接"。 默认: 假

如果真或"链接",则在取日期的下方显示"今天"按钮来选择当前日期. 如果真实, “ 今天” 按钮将只将当前日期移动到视图中; 如果“ 链接” , 也将选择当前日期 .

### 今天的要闻

布尔. 默认: 假

如果选中, 请突出当前日期 .

### 键盘导航

布尔. 默认: 真

是否允许日期由箭头键导航 .

### 语言

弦乐 默认: “ en”

用于月份和日名的语言的双字母代码. 这些也会被作为输入值(然后在提交表单的情况下发送给服务器). 目前船舶有英文('en'),德文('de'),巴西文('br')和西班牙文('es')等译名,但其他可以添加(见下文I18N). 如果给出了未知的语言代码,则会使用英语.

### 强角

布尔. 默认: 真

采取器关闭时是否强制解析输入值 。 也就是说,当用户在输入字段中留下一个无效的日期时,拾取者会强制解析该值,并将输入值设定为新的有效日期,符合给定的日期 `format`。 。 。 .

### 靴子变速器

号码.

您可以使用此选项来覆盖不同靴子版本(例如2或3)的自动检测功能.

### 分钟步骤

号码。 默认: 5

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

### 参考文件:已贬值

弦乐 默认: “ 默认 ”

用于执行组件的取取器的参考元素。 如果您想要将拾取器放在输入字段下, 请指定 `input`。 。 。 .

### 拾取器

弦乐 默认 : “ 从下到右” (支持的值为:“ 从下到右” 、 “ 从下到左” 、 “ 从上到右” 、 “ 从上到左” )

此选项允许将拾取器放在组件执行的输入字段之下, 而不是按钮右下方的默认位置 .

### 视图选择

数字或字符串。 默认 : `same as minView` (支持的值有:"十年","年","月","日","小时")

您可以使用此选项选择选择日期的视图 。 默认是最后一个,不过你可以选择第一个,所以每次点击都会更新日期.

### 显示梅里迪亚语Name

布尔. 默认: 假

此选项将允许在白天和小时查看中线视图 .

### 初始日期

约会或字符串。 默认: 新日期( )

你可以以日期来初始化观众. 默认是现在,所以你可以指定 昨天或今天午夜...

### zindex 数据

号码。 默认: 未定义

zIndex值正在基于 DOM 树自动计算,我们在此寻求最高值。 要跳过此进程, 您可以手动设定值 .

### 打开

在取枣者体内制造出一天后,该事件即被发射. 应还弦. 返回“ 残疾” 以禁用被选中的一天 .

```javascript
$('#date-end')
    .datetimepicker({
        onRender: function(date) {
            return ev.date.valueOf() < date-start-display.valueOf() ? ' disabled' : '';
        }
    });
```

### 字体优美

布尔. 默认: 假

如果真是这样, [字体帅呆了](http://fontawesome.io/) 将被使用.

## 标记

格式为组件.

```html
<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>
```

格式为组件并重置按钮以清除输入字段.

```html
<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>
```

## 方法

### . 日期时间选择( 选项)

初始化约会时间选择器 .

### 删除

参数: 无

删除取出日期的时间 。 删除附带事件、内附对象,以及 添加了 HTML 元素.

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

### 显示

参数: 无

显示取日期者.

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

### 隐藏

参数: 无

藏取出日期者.

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

### 更新

参数 :

-   当前日期( 日期) .

以指定日期更新取出日期的时间 .

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

关闭当前 Date 以当前输入值更新取日期器 .

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

### 设定开始日期

参数 :

-   开始日期( 字符串)

设置日期选择器的新下限日期.

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

Omit start Date(或提供假值)来取消限制.

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

### 设置结束日期

参数 :

-   结束日期( 字符串)

设置日期选择器的新的上限日期.

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

Omit endDate(或提供假值)来取消限制.

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

### 设置周出残废

参数 :

-   (String-Q-Array) Week Disabled 的日子

设定禁用周日 .

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

Omit days OfWeek Disabled(或提供假值)来解除残废日.

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

### 设置

参数 :

-   分钟已失效( String-% 箭头)

设定应禁用的分钟.

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

关闭分钟 关闭( 或提供假值) 以取消禁用分钟 .

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

### 设置障碍

参数 :

-   小时 残疾( String- 箭头)

设定应当禁用的时间.

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

关闭时数 关闭时数( 或提供假值) 关闭时数 .

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

## 活动

取日期课会曝光一些操纵日期的事件.

### 显示

显示取枣器时被放出 .

### 隐藏

取枣者入藏后被放出.

### 更改日期

更改日期时被开除.

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

### 年份变化

发射时 _视图_ 这一年与十年观点不同.

### 每月更改

发射时 _视图_ 月由年视取而更之.

### 离线

当你选择日期之前 _开始日期_ 或于 _结束日期_ 或者当您通过该方法指定日期时 _日期_ 或者说 _设置UTCDate_.

### 下一个: \* / prov: \*

点击时已开火 _下一个_ 或者说 _上一个_ 箭头. 支持所有不同视图模式( “年”、“ 月”、“ 日”、“ 小时” ) 。 例如允许您绑定回调到“ 下个月 ” 或“ prev: month ” 动作 .

## 键盘支持

取出日期的时间包括一些键盘导航:

### 上,下,左,右箭头键

单靠自己,左/右会向后/向后移动一天,上/向下移动一周.

以转会键,上/左会向后移动一个月,下/右会向前移动一个月.

用 Ctrl 键,上/左会往后移动一年,下/右会往后移动一年.

Shift+ctrl行为与ctrl相同——也就是说,它不会同时改变月份和年份,只有年份.

### 逃脱

逃生密钥可用于隐藏并重新显示取出日期的取出者;如果用户想要手动编辑值,则有必要这样做.

### 输入

当采取器可见时,输入会简单地隐藏. 当采取器不可见时,输入会有正常效果-提交当前形式等.

## 鼠标轮视图导航

为了使这个插件更容易设置不同部分的日期时间,鼠标轮被用来通过不同视图来导航. 卷起你的鼠标轮 导航到十年景点。 向下滚动会导致分钟的取景.

### 依赖性

来标注这个特性. [查询鼠标轮盘插件](https://github.com/brandonaaron/jquery-mousewheel) 在使用此特性之前必须包含.

### 选项

#### 轮式维ewMode导航

布尔. 默认: 假

是否允许使用鼠标轮通过不同视图模式进行导航 .

#### 轮子View ModeNavigation 逆向方向

布尔. 默认: 假

是否逆向滚动方向. 默认滚动至十年视图 .

#### 轮子ViewModeNavigation 延迟

整数. 默认: 100

下回回向轮命令之间的时间延迟,它控制了在不同视图中切换之间的速度. 单位在百万秒.

#### 关于视图选择选项

当启用此特性时, 视图选择选项的建议值为 4 。 这意味着你可以轻松更新每个视图中的任何值. 此选项值在演示页中应用 .

### 特性演示

很简单 [演示](http://lyonlai.github.io/bootstrap-datetimepicker/demo.html) 页面是用来显示它的简单的想法.

## 编号 18N

插件支持 i18n 的月份和工作日名称以及 `weekStart` 选项。 默认为英文('en');其他可用的译名可在 `js/locales/` 目录,只需在插件后包含您想要的地方。 要添加更多语言,只需在 `$.fn.datetimepicker.dates`在打电话之前 `.datetimepicker()`示例:

```javascript
$.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` 属性. 示例

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

从右到左的语言也可以包括: `rtl: true` 以适当显示日历.

如果您的浏览器( 或用户的浏览器) 显示字符错误, 浏览器有可能在加载非 Unicode 编码的 javascript 文件 。 简单添加 `charset="UTF-8"` 给您的 `script` 标签 :

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

## 常见问题

### @foxythemes/bootstrap-datetime-picker-bs4 是什么？

基于 twitter 靴子的取时器部件

### 如何安装 @foxythemes/bootstrap-datetime-picker-bs4？

在项目目录运行 npm install @foxythemes/bootstrap-datetime-picker-bs4，或使用 pnpm add / yarn add / bun add。

### @foxythemes/bootstrap-datetime-picker-bs4 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/foxythemes\_\_bootstrap-datetime-picker-bs4 是否存在。

### @foxythemes/bootstrap-datetime-picker-bs4 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @foxythemes/bootstrap-datetime-picker-bs4 可以商用吗？

@foxythemes/bootstrap-datetime-picker-bs4 使用 Apache 2\.0 许可。声明的许可为 Apache 2\.0，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @foxythemes/bootstrap-datetime-picker-bs4 的下载量有多少？

根据 npm 官方下载统计，@foxythemes/bootstrap-datetime-picker-bs4 在 2026/10/16 – 2026/11/14 这 30 天内被下载 2,544 次，日均约 85 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @foxythemes/bootstrap-datetime-picker-bs4 还在维护吗？

最新版本 2\.3\.5 发布于 2018/09/29（8 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/07/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。