# @basenative/date 中文文档

规范地址：https://npmcn.com/package/%40basenative/date/

版本：3\.0\.0
npm 元数据更新时间：2026-10-31T13:47:15.310Z
中文译文更新时间：2026-10-31T16:18:01.401Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40basenative/date
原文对照：https://npmcn.com/package/%40basenative/date/?lang=original
项目主页：https://github.com/DuganLabs/BaseNative/tree/main/packages/date#readme
源码仓库：https://github.com/DuganLabs/BaseNative

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

- 包体积（解压后）：15.3 kB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2026-03-20T05:27:47.380Z
- 最新版本发布：2026-10-31T13:47:14.967Z
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

日期实用程序、时区处理、相对时间格式和日期范围

## 安装

```sh
npm install @basenative/date
```

也可以使用：`pnpm add @basenative/date`、`yarn add @basenative/date`、`bun add @basenative/date`

## README

# @basenative /日期

> 使用语义HTML输入的本机日期/时间选择器组件

部分 [BaseNative](https://github.com/DuganLabs/basenative) 生态系统——基于信号的web运行时，基于原生HTML。

## 安装

```bash
npm install @basenative/date
```

## 快速入门

```js
import { renderDatepicker, renderTimepicker, renderDateRange } from '@basenative/date';

// Render a date picker
const html = renderDatepicker({
  name: 'startDate',
  label: 'Start Date',
  value: '2024-01-15',
  min: '2024-01-01',
  max: '2024-12-31',
  required: true,
});

// Render a time picker
const timeHtml = renderTimepicker({
  name: 'startTime',
  label: 'Start Time',
  value: '09:00',
});

// Render a date range (two date inputs)
const rangeHtml = renderDateRange({
  startName: 'startDate',
  endName: 'endDate',
  startLabel: 'From',
  endLabel: 'To',
});
```

## 服务器端呈现

```js
import { render } from '@basenative/server';
import { renderDatepicker } from '@basenative/date';

const page = render('<main>{{ datepicker }}</main>', {
  datepicker: renderDatepicker({ name: 'dob', label: 'Date of Birth' }),
});
```

## API

### `renderDatepicker(options?)`

呈现一个 `<input type="date">` 包裹在贴有标签的容器中。返回一个HTML字符串。

选项:

-   `name` -输入 `name` 属性。
-   `label` -标签文本（如果没有提供则省略）。
-   `value` -的初始值 `YYYY-MM-DD` 格式。
-   `min` / `max` -中的日期范围约束 `YYYY-MM-DD` 格式。
-   `required` -添加 `required` 属性。
-   `disabled` -添加 `disabled` 属性。
-   `id` -元素ID (如果省略则自动生成)。
-   `attrs` -附加到输入的附加原始HTML属性字符串。

### `renderTimepicker(options?)`

呈现一个 `<input type="time">` 具有相同的选项形状 `renderDatepicker`,使用 `HH:MM` 值。

### `renderDateRange(options?)`

呈现两个链接的日期输入（开始和结束）。选项包括所有 `renderDatepicker` 前缀为的选项 `start` 和 `end` (如。 `startName`， `endName`， `startLabel`， `endLabel`， `startValue`， `endValue`）。

## 许可证

apache - 2.0

## 常见问题

### @basenative/date 是什么？

日期实用程序、时区处理、相对时间格式和日期范围

### 如何安装 @basenative/date？

在项目目录运行 npm install @basenative/date，或使用 pnpm add / yarn add / bun add。

### @basenative/date 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @basenative/date 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @basenative/date 可以商用吗？

@basenative/date 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @basenative/date 还在维护吗？

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