# @activeadmin-plugins/active\_admin\_datetimepicker 中文文档

规范地址：https://npmcn.com/package/%40activeadmin-plugins/active_admin_datetimepicker/

版本：2\.1\.0
npm 元数据更新时间：2026-10-02T18:11:32.862Z
中文译文更新时间：2026-11-05T21:23:15.962Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40activeadmin-plugins/active_admin_datetimepicker
原文对照：https://npmcn.com/package/%40activeadmin-plugins/active_admin_datetimepicker/?lang=original
项目主页：https://github.com/activeadmin-plugins/active_admin_datetimepicker#readme
源码仓库：https://github.com/activeadmin-plugins/active_admin_datetimepicker

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

- 包体积（解压后）：139 kB，7 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：1 个
- 首次发布：2022-04-15T08:34:09.886Z
- 最新版本发布：2026-10-02T18:11:32.670Z
- 近 30 天下载量：18415（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 2 个）

## 中文简介

将 jQuery xdan 日期选择插件整合到 ActiveAdmin

## 安装

```sh
npm install @activeadmin-plugins/active_admin_datetimepicker
```

也可以使用：`pnpm add @activeadmin-plugins/active_admin_datetimepicker`、`yarn add @activeadmin-plugins/active_admin_datetimepicker`、`bun add @activeadmin-plugins/active_admin_datetimepicker`

## README

[![Gem Version](https://badge.fury.io/rb/active_admin_datetimepicker.svg)](http://badge.fury.io/rb/active_admin_datetimepicker) [![NPM Version](https://badge.fury.io/js/@activeadmin-plugins%2Factive_admin_datetimepicker.svg)](https://badge.fury.io/js/@activeadmin-plugins%2Factive_admin_datetimepicker) ![npm](https://img.shields.io/npm/dm/@activeadmin-plugins/active_admin_datetimepicker) [![CI](https://github.com/activeadmin-plugins/active_admin_datetimepicker/actions/workflows/ci.yml/badge.svg)](https://github.com/activeadmin-plugins/active_admin_datetimepicker/actions/workflows/ci.yml) ![Coverage](https://img.shields.io/endpoint?url=https://activeadmin-plugins.github.io/active_admin_datetimepicker/badge.json)

# 活动时间选择器

添加 XDSoft 的日期时间拾取器为 a `date_time_picker` 表格输入,以及 `date_time_range` 用于过滤器.

![ActiveAdminDatetimepicker](https://raw.githubusercontent.com/activeadmin-plugins/active_admin_datetimepicker/master/screen/screen.png "ActiveAdminDatetimepicker")

## 安装

将此行添加到您的应用程序 `Gemfile`数字 :

```ruby
gem 'active_admin_datetimepicker'
```

然后执行:

```
$ bundle
```

或者自己装作:

```
$ gem install active_admin_datetimepicker
```

##### 通过Sprockets使用资产

将以下行添加到 `app/assets/stylesheets/active_admin.scss`数字 :

```css
@import "active_admin_datetimepicker";
```

将以下行添加到 `app/assets/javascripts/active_admin.js`数字 :

```javascript
//= require active_admin_datetimepicker
```

##### 通过国家预防机制/雅尔恩利用资产

执行 :

```
$ npm i @activeadmin-plugins/active_admin_datetimepicker
```

或者说

```
$ yarn add @activeadmin-plugins/active_admin_datetimepicker
```

或者手动添加到 `package.json`数字 :

```
"dependencies": {
  "@activeadmin-plugins/active_admin_datetimepicker": "latest"
}
```

并执行 :

```
$ yarn
```

将以下行添加到 `app/assets/javascripts/active_admin.js`数字 :

```javascript
import '@activeadmin-plugins/active_admin_datetimepicker';
```

将以下行添加到 `app/assets/stylesheets/active_admin.scss`数字 :

```css
@import '@activeadmin-plugins/active_admin_datetimepicker';
```

## 使用量

此插件添加到 `date_time_picker` 输入和 `date_time_range` 过滤器,使用 [XDSoft 日期时间拾取器](https://github.com/xdan/datetimepicker/)。 。 。 .

这个 `date_time_picker` 输入接受标准 jQueryUI Datepicker 可用的许多选项。 例如:

```ruby
  # Index page filters
  filter :created_at, as: :date_time_range

  # New/Edit form
  form do |f|
    f.input :starts_at, as: :date_time_picker, datepicker_options: { min_date: "2013-10-8",        max_date: "+3D" }
    f.input :ends_at,   as: :date_time_picker, datepicker_options: { min_date: 3.days.ago.to_date, max_date: "+1W +5D" }
  end
```

## 取代初始化中的行为

```ruby
# This if for the front-end JavaScript side
ActiveAdminDatetimepicker::Base.default_datetime_picker_options = {
    defaultDate: proc { Time.current.strftime("%Y-%m-%d 00:00") }
}
# This if for the Ruby backend
ActiveAdminDatetimepicker::Base.format = "%Y-%m-%d %H:%M:%S"
```

## 更改日期时间格式

如果想要改变格式,则需要确保前端和后端格式相同. 记住JS和Ruby约会时间格式有不同的语法.

创建配置文件 `config/initializers/init_datetimepicker.rb`数字 :

```ruby
# Example "11/03/2016 13:00"
ActiveAdminDatetimepicker::Base.default_datetime_picker_options = {
    format: 'd/m/Y H:i', # JS format
    defaultTime: proc { Time.current.strftime('%H:00') } # not necessary
}
ActiveAdminDatetimepicker::Base.format = "%d/%m/%Y %H:%M" # Ruby format
```

见 [详细日期选择文件](http://xdsoft.net/jqplugins/datetimepicker/)。 。 。 .

## 捐款

1.  叉开它 [https://github.com/活化admin-plugins/活化 admin datetimepicker/fork 互联网档案馆的存檔,存档日期2013-12-21](https://github.com/activeadmin-plugins/active_admin_datetimepicker/fork) (中文(简体) )
2.  创建您的特性分支( E)`git checkout -b my-new-feature`(中文(简体) )
3.  提交更改( E)`git commit -am 'Add some feature'`(中文(简体) )
4.  推向分行(`git push origin my-new-feature`(中文(简体) )
5.  创建新拉请求

## 常见问题

### @activeadmin-plugins/active\_admin\_datetimepicker 是什么？

将 jQuery xdan 日期选择插件整合到 ActiveAdmin

### 如何安装 @activeadmin-plugins/active\_admin\_datetimepicker？

在项目目录运行 npm install @activeadmin-plugins/active\_admin\_datetimepicker，或使用 pnpm add / yarn add / bun add。

### @activeadmin-plugins/active\_admin\_datetimepicker 支持 TypeScript 吗？

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

### @activeadmin-plugins/active\_admin\_datetimepicker 支持 ESM 还是 CommonJS？

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

### @activeadmin-plugins/active\_admin\_datetimepicker 可以商用吗？

@activeadmin-plugins/active\_admin\_datetimepicker 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @activeadmin-plugins/active\_admin\_datetimepicker 的下载量有多少？

根据 npm 官方下载统计，@activeadmin-plugins/active\_admin\_datetimepicker 在 2026/10/05 – 2026/11/03 这 30 天内被下载 18,415 次，日均约 614 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @activeadmin-plugins/active\_admin\_datetimepicker 还在维护吗？

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