# @chenfengyuan/datepicker 中文文档

规范地址：https://npmcn.com/package/%40chenfengyuan/datepicker/

版本：1\.0\.10
npm 元数据更新时间：2022-04-04T22:38:47.489Z
中文译文更新时间：2026-11-09T12:07:42.230Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40chenfengyuan/datepicker
原文对照：https://npmcn.com/package/%40chenfengyuan/datepicker/?lang=original
项目主页：https://fengyuanchen.github.io/datepicker
源码仓库：https://github.com/fengyuanchen/datepicker

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

- 包体积（解压后）：266 kB，62 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：jquery \>=1\.9\.1
- 首次发布：2018-06-30T09:34:07.852Z
- 最新版本发布：2020-09-29T15:05:18.959Z
- 近 30 天下载量：17311（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 0 个）

## 中文简介

一个简单的 jQuery 取日期插件 .

## 安装

```sh
npm install @chenfengyuan/datepicker
```

也可以使用：`pnpm add @chenfengyuan/datepicker`、`yarn add @chenfengyuan/datepicker`、`bun add @chenfengyuan/datepicker`

## README

# 摘取日期者

[![Build Status](https://img.shields.io/travis/fengyuanchen/datepicker.svg)](https://travis-ci.org/fengyuanchen/datepicker) [![Downloads](https://img.shields.io/npm/dm/@chenfengyuan/datepicker.svg)](https://www.npmjs.com/package/@chenfengyuan/datepicker) [![Version](https://img.shields.io/npm/v/@chenfengyuan/datepicker.svg)](https://www.npmjs.com/package/@chenfengyuan/datepicker)

> 一个简单的 jQuery 取日期插件 .

-   [网站](https://fengyuanchen.github.io/datepicker)

## 目录

-   [特征](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-features)
-   [主要](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-main)
-   [开始](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-getting-started)
-   [选项](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-options)
-   [方法](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-methods)
-   [活动](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-events)
-   [I18n 时](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-i18n)
-   [无冲突](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-no-conflict)
-   [浏览器支持](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-browser-support)
-   [版本](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-versioning)
-   [许可证](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-license)

## 特征

-   支助 [选项](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-options)
-   支助 [方法](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-methods)
-   支助 [事件](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-events)
-   支持内入模式
-   支持触摸( 移动)
-   支持国际化
-   交叉浏览器支持

## 主要

```text
dist/
├── datepicker.css
├── datepicker.min.css   (compressed)
├── datepicker.js        (UMD)
├── datepicker.min.js    (UMD, compressed)
├── datepicker.common.js (CommonJS, default)
└── datepicker.esm.js    (ES Module)
```

## 开始

### 安装

```shell
npm install @chenfengyuan/datepicker
```

包含文件 :

```html
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/datepicker.css" rel="stylesheet">
<script src="/path/to/datepicker.js"></script>
```

### 使用量

初始化为 `$.fn.datepicker` 方法.

```html
<input data-toggle="datepicker">
<textarea data-toggle="datepicker"></textarea>
<div data-toggle="datepicker"></div>
```

```js
$('[data-toggle="datepicker"]').datepicker();
```

[回到顶部](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-table-of-contents)

## 选项

您可以设置选取日期选项 `$().datepicker(options)`。 。 。 . 如果您想要更改全局默认选项, 您可以使用 `$.fn.datepicker.setDefaults(options)`。 。 。 .

### 自动显示

-   类型 : `Boolean`
-   默认 : `false`

初始化时自动显示取枣者 .

### 自动隐藏

-   类型 : `Boolean`
-   默认 : `false`

选取时自动隐藏取枣者 .

### 自动选择

-   类型 : `Boolean`
-   默认 : `false`

初始化时自动选择初始日期 .

### 内入

-   类型 : `Boolean`
-   默认 : `false`

启用内线模式 .

如果元素不是输入元素,则会将取日期符附加到元素中. 如果 `container` 选项,将把取日期器附加到容器中.

### 集装箱

-   类型 : `Element` 或者说 `String`(选择)
-   默认 : `null`

放置取枣器的元素 。 如果不设定,取出日期将附加在 `document.body` 默认.

> 只有当 `inline` 选项设置为 `true`。 。 。 .

### 触发

-   类型 : `Element` 或者说 `String`(选择)
-   默认 : `null`

触发取枣者的元素 .

### 语言

-   类型 : `String`
-   默认 : `''`

ISO语言代码. 如果没有设置, 将使用内置语言( N)`en-US`默认情况下.

> 您应该先定义语言 。 查看 [I18n 时](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-i18n) 或检查 [`i18n`](https://npmcn.com/package/%40chenfengyuan/datepicker/i18n) 可用语言的文件夹.

```js
$().datepicker({
  language: 'en-GB'
});
```

### 格式

-   类型 : `String`
-   默认 : `'mm/dd/yyyy'`
-   可用的日期占位符 :
    -   年份 : `yyyy`, (中文(简体) ), `yy`
    -   月数 : `mm`, (中文(简体) ), `m`
    -   天数 : `dd`, (中文(简体) ), `d`

日期字符串格式.

```js
$().datepicker({
  format: 'yyyy-mm-dd'
});
```

### 日期

-   类型 : `Date` 或者说 `String`
-   默认 : `null`

初约. 如果不设定, 默认将使用当前日期 .

```js
$().datepicker({
  date: new Date(2014, 1, 14) // Or '02/14/2014'
});
```

### 开始日期

-   类型 : `Date` 或者说 `String`
-   默认 : `null`

开始取景日期. 此日期之前的所有日期将被禁用 .

### 结束日期

-   类型 : `Date` 或者说 `String`
-   默认 : `null`

终收视日期. 此日期后的所有日期都将被禁用 .

### 开始查看

-   类型 : `Number`
-   默认 : `0`
-   选项 :
    -   `0`天数 :
    -   `1`月数
    -   `2`年数 :

初始化时的起始视图 .

### 每周开始

-   类型 : `Number`
-   默认 : `0`
-   选项 :
    -   `0`时间:周日
    -   `1`时间:星期一
    -   `2`页:1
    -   `3`(单位:千美元)
    -   `4`页:1
    -   `5`页:1
    -   `6`页:1

周之起发.

### 第一年

-   类型 : `Boolean`
-   默认 : `false`

在摘取日期的页眉上显示月前的一年

### 后继年份

-   类型 : `String`
-   默认 : `''`

弦后缀为年号.

```js
$().datepicker({
  yearSuffix: '年'
});
```

### 天数

-   类型 : `Array`
-   默认 : `['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']`

日以周为名.

### 短时间

-   类型 : `Array`
-   默认 : `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`

更短日取名.

### 天数min

-   类型 : `Array`
-   默认 : `['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']`

最短日名相会.

### 月数

-   类型 : `Array`
-   默认 : `['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']`

数月取名.

### 短短数月

-   类型 : `Array`
-   默认 : `['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']`

更短数月名.

### 项目标签

-   类型 : `String`
-   默认 : `'li'`

年、月和日的每个项目的元素标记.

### 哑巴分类

-   类型 : `String`
-   默认 : `'muted'`

哑弹项目的一个类( CSS) .

### 选中等级

-   类型 : `String`
-   默认 : `'picked'`

选取项的类( CSS) .

### 禁用分类

-   类型 : `String`
-   默认 : `'disabled'`

禁用项目的一个类( CSS) .

### 突出显示 类

-   类型 : `String`
-   默认 : `'highlighted'`

用于突出日期项的类( CSS) .

### 模板

-   类型 : `String`
-   默认 :

```html
<div class="datepicker-container">
  <div class="datepicker-panel" data-view="years picker">
    <ul>
      <li data-view="years prev">&lsaquo;</li>
      <li data-view="years current"></li>
      <li data-view="years next">&rsaquo;</li>
    </ul>
    <ul data-view="years"></ul>
  </div>
  <div class="datepicker-panel" data-view="months picker">
    <ul>
      <li data-view="year prev">&lsaquo;</li>
      <li data-view="year current"></li>
      <li data-view="year next">&rsaquo;</li>
    </ul>
    <ul data-view="months"></ul>
  </div>
  <div class="datepicker-panel" data-view="days picker">
    <ul>
      <li data-view="month prev">&lsaquo;</li>
      <li data-view="month current"></li>
      <li data-view="month next">&rsaquo;</li>
    </ul>
    <ul data-view="week"></ul>
    <ul data-view="days"></ul>
  </div>
</div>
```

取枣者之模板.

**说明:** 所有的东西 `data-view` 属性在自定义时必须设置.

### 页:1

-   类型 : `Number`
-   默认 : `10`

从元素中取出日期的上下相抵.

### zindex 数据

-   类型 : `Number`
-   默认 : `1`

支助科 `z-index` 选择日期的样式.

### 过滤器

-   类型 : `Function`
-   默认 : `null`
-   语法 `filter(date, view)`
    -   `date`:检查日期.
    -   `view`: 当前视图, 其中之一 `day`, (中文(简体) ), `month` 或者说 `year`。 。 。 .

过滤每个日期项目 。 如果返回 a `false` 值,相关日期将被禁用.

```js
var now = Date.now();

$().datepicker({
  filter: function(date, view) {
    if (date.getDay() === 0 && view === 'day') {
      return false; // Disable all Sundays, but still leave months/years, whose first day is a Sunday, enabled.
    }
  }
});
```

### 显示

-   类型 : `Function`
-   默认 : `null`

"show.date pickers"事件的捷径.

### 隐藏

-   类型 : `Function`
-   默认 : `null`

"hide.datepicker"事件的捷径.

### 选择

-   类型 : `Function`
-   默认 : `null`

"取出日期"事件的捷径.

[回到顶部](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-table-of-contents)

## 方法

常见用法 :

```js
$().datepicker('method', argument1, , argument2, ..., argumentN);
```

### 显示 ()

显示取枣者.

### 隐藏( c)

藏取枣者.

### 更新()

用当前元素的值或文本更新取日期符.

### 选择( c)

选择当前日期为元素 .

### 重设( c)

重置取枣者.

### 获取月Name (\[月 \[, 短 \])

-   **月份** (可选) :
    
    -   类型 : `Number`
    -   默认: 当前日期的月份
-   **简称** (可选) :
    
    -   类型 : `Boolean`
    -   默认 : `false`
    -   获取较短的月份名
-   (返回值):
    
    -   类型 : `String`

以给定参数或当前日期获取月份名称 .

```js
$().datepicker('getMonthName'); // 'January'
$().datepicker('getMonthName', true); // 'Jan'
$().datepicker('getMonthName', 11); // 'December'
$().datepicker('getMonthName', 11, true); // 'Dec'
```

### 获取 Day Name (\[日 \[, 短 \[, 分)\])

-   **日数** (可选) :
    
    -   类型 : `Number`
    -   默认: 当前日期的日期
-   **简称** (可选) :
    
    -   类型 : `Boolean`
    -   默认 : `false`
    -   获取更短的日名
-   **分钟** (可选) :
    
    -   类型 : `Boolean`
    -   默认 : `false`
    -   获取最短的日名
-   (返回值):
    
    -   类型 : `String`

获取指定参数的日名或当前日期 .

```js
$().datepicker('getDayName'); // 'Sunday'
$().datepicker('getDayName', true); // 'Sun'
$().datepicker('getDayName', true, true); // 'Su'
$().datepicker('getDayName', 6); // 'Saturday'
$().datepicker('getDayName', 6, true); // 'Sat'
$().datepicker('getDayName', 6, true, true); // 'Sa'
```

### 获取日期( \[格式化 )

-   **格式化** (可选) :
    
    -   类型 : `Boolean`
    -   默认 : `false`
    -   获得格式化的日期字符串
-   (返回值):
    
    -   类型 : `Date` 或者说 `String`

获取当前日期 .

```js
$().datepicker('getDate'); // date object
$().datepicker('getDate', true); // '02/14/2014'
```

### 日期( 日期)

-   **日期**数字 :
    -   类型 : `Date` 或者说 `String`

以新日期设定当前日期 .

```js
$().datepicker('setDate', new Date(2014, 1, 14));
$().datepicker('setDate', '02/14/2014');
```

### 设定开始日期( 日期)

-   **日期**数字 :
    -   类型 : `Date` 或者说 `String` 或者说 `null`

以新日期设定起始视图日期 .

### 设定结束日期( 日期)

-   **日期**数字 :
    -   类型 : `Date` 或者说 `String` 或者说 `null`

以新日期设定结束视图日期 .

### 参数( 日期)

-   **日期**数字 :
    -   类型 : `String`

用设定的日期格式分析日期字符串.

```js
$().datepicker('parseDate', '02/14/2014'); // date object
```

### 格式 Date( 日期)

-   **日期**数字 :
    -   类型 : `Date`

将日期对象格式化为带有设定日期格式的字符串.

```js
$().datepicker('formatDate', new Date(2014, 1, 14)); // '02/14/2014'
```

### 销毁()

摧毁取枣者并删除目标元素中的实例.

[回到顶部](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-table-of-contents)

## 活动

### 显示. 日期选择器

此事件在开始显示取枣者时会起火.

### 隐藏. 日期选择器

这个事件在开始隐藏取枣者时会起火.

### pick.date picker (英语)

-   **事件. 日期**数字 :
    
    -   类型 : `Date`
    -   目前的日期
-   **事件。视图**数字 :
    
    -   类型 : `String`
    -   默认 : `''`
    -   选项 : `'year'`, (中文(简体) ), `'month'`, (中文(简体) ), `'day'`
    -   当前可见的视图

一年、一月或一日.

```js
$().on('pick.datepicker', function (e) {
  if (e.date < new Date()) {
    e.preventDefault(); // Prevent to pick the date
  }
});
```

[回到顶部](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-table-of-contents)

## I18n 时

```js
// datepicker.zh-CN.js
$.fn.datepicker.languages['zh-CN'] = {
  format: 'yyyy年mm月dd日',
  days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
  daysShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
  daysMin: ['日', '一', '二', '三', '四', '五', '六'],
  months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  weekStart: 1,
  startView: 0,
  yearFirst: true,
  yearSuffix: '年'
};
```

```html
<script src="/path/to/datepicker.js"></script>
<script src="/path/to/datepicker.zh-CN.js"></script>
<script>
  $().datepicker({
    language: 'zh-CN'
  });
</script>
```

[回到顶部](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-table-of-contents)

## 无冲突

如果您需要使用同一命名空间的其他插件, 请打电话到 `$.fn.datepicker.noConflict` 重新使用的方法.

```html
<script src="other-plugin.js"></script>
<script src="datepicker.js"></script>
<script>
  $.fn.datepicker.noConflict();
  // Code that uses other plugin's "$().datepicker" can follow here.
</script>
```

## 浏览器支持

-   颜色( 最新)
-   火狐( 最新)
-   萨法里(最新)
-   歌剧( 最新)
-   边缘( 最新)
-   互联网探索者 9+

## 版本

维持在 [语义版准则](https://semver.org/)。 。 。 .

## 许可证

[麻省理工学院](https://opensource.org/licenses/MIT) © [陈凤远](https://chenfengyuan.com/)

[回到顶部](https://npmcn.com/package/%40chenfengyuan/datepicker/#readme-table-of-contents)

## 常见问题

### @chenfengyuan/datepicker 是什么？

一个简单的 jQuery 取日期插件 \.

### 如何安装 @chenfengyuan/datepicker？

在项目目录运行 npm install @chenfengyuan/datepicker，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：jquery（\>=1\.9\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @chenfengyuan/datepicker 支持 TypeScript 吗？

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

### @chenfengyuan/datepicker 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @chenfengyuan/datepicker 可以商用吗？

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

### @chenfengyuan/datepicker 的下载量有多少？

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

### @chenfengyuan/datepicker 还在维护吗？

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