# @fengyuanchen/datepicker 中文文档

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

版本：0\.6\.5
npm 元数据更新时间：2022-06-12T17:52:59.832Z
中文译文更新时间：2026-11-14T14:30:05.152Z
软件包许可：MIT

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

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

弃用说明：This package has been renamed to "@chenfengyuan/datepicker"\.

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

- 包体积（解压后）：228 kB，42 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：jquery \>= 1\.9\.1
- 首次发布：2015-10-18T07:05:02.700Z
- 最新版本发布：2018-03-31T06:28:08.611Z
- 近 30 天下载量：3058（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：18（近 12 个月 0 个）

## 中文简介

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

## 安装

```sh
npm install @fengyuanchen/datepicker
```

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

## README

# 摘取日期者

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

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

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

## 目录

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

## 特征

-   支助 [选项](https://npmcn.com/package/%40fengyuanchen/datepicker/#readme-options)
-   支助 [方法](https://npmcn.com/package/%40fengyuanchen/datepicker/#readme-methods)
-   支助 [事件](https://npmcn.com/package/%40fengyuanchen/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 @fengyuanchen/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/%40fengyuanchen/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语言代码. 如果没有设置,则默认使用内置语言(en-US).

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

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

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

$().datepicker({
  filter: function(date) {
    if (date.getDay() === 0) {
      return false; // Disable all Sundays
    }
  }
});
```

### 显示

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

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

### 隐藏

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

"hide.datepicker"事件的捷径.

### 选择

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

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

[回到顶部](https://npmcn.com/package/%40fengyuanchen/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`

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

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

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

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

### 参数( 日期)

-   **日期**数字 :
    -   类型 : `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/%40fengyuanchen/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/%40fengyuanchen/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/%40fengyuanchen/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>
```

## 浏览器支持

-   铬(最新2份)
-   火狐(最新2个)
-   互联网探索者 8+
-   边缘( 最近2个)
-   歌剧院(最新2个)
-   萨法里(最新2份)

作为 jQuery 插件,您还需要查看 [j 查询浏览器支持](http://jquery.com/browser-support/)。 。 。 .

## 版本

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

## 许可证

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

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

## 常见问题

### @fengyuanchen/datepicker 是什么？

一个简单的 jQuery 取日期插件 \.注意：该包已被作者标记为弃用——This package has been renamed to "@chenfengyuan/datepicker"\.

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

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

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

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

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

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

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

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

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

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

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

最新版本 0\.6\.5 发布于 2018/03/31（8 年前）；至今共发布 18 个版本，其中过去 12 个月发布了 0 个；首次发布于 2015/10/18。作者已将其标记为弃用，新项目建议寻找替代方案。