# @tawa/mario-date-picker

> > 表单-日期选择

Latest version **0.2.3** (published 2022-11-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @tawa/mario-date-picker
pnpm add @tawa/mario-date-picker
yarn add @tawa/mario-date-picker
bun add @tawa/mario-date-picker
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2022-11-22 |
| First published | 2022-10-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 13.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | nanz |
| Maintainers | xiaoshiming, thefirstsunday |

## Links

- npm: https://www.npmjs.com/package/@tawa/mario-date-picker
- Repository: https://github.com/TawaDeveloper/mario
- Homepage: https://github.com/TawaDeveloper/mario#readme
- Issues: https://github.com/TawaDeveloper/mario/issues
- npm.io page: https://npm.io/package/@tawa/mario-date-picker

## Dependencies (2)

- [moment](https://npm.io/package/moment.md) ^2.29.1
- [@tawa/mario-utils](https://npm.io/package/@tawa/mario-utils.md) ^0.2.3

## Recent versions

- 0.2.3 (latest) — 2022-11-22
- 0.2.2 — 2022-10-27
- 0.2.1 — 2022-10-09
- 0.2.0 — 2022-10-09
- 0.1.0 — 2022-10-09

## README

---
title: DatePicker 日期选择框
nav:
  path: /components
  title: 组件
  order: 1
group:
  title: 数据录入
  path: /date-picker
  order: 5
---

# DatePicker 日期选择框

输入或选择日期的控件。

## 使用

提供全局属性配置的能力。目前 DatePicker 组件仅支持 picker='date', 此场景在系统中应用的最多。通过配置 valueType 返回不同类型的日期值。其他类型的 picker 请使用 antd 日期组件。

⚠️ 注意: 在 form 表单中使用时，若需要设置初始值，初始值的类型应和你设置的 valueType 返回类型保持一致。例如，你的 valueType='stampobject', 初始值应该设置为

```javascript
{ startTime: moment().startOf('day').valueOf(), endTime: moment().endOf('day').valueOf() }
```

```javascript
import DatePicker from '@tawa/mario-date-picker';

<DatePicker />;
```

## 代码演示

### 基本用法

<code src="./src/demo/demo1.tsx" />

### 与 form 绑定

<code src="./src/demo/demo2.tsx" />

### 参数

| 参数      | 说明                                                   | 类型        | 默认值      |
| --------- | ------------------------------------------------------ | ----------- | ----------- |
| valueType | 时间组件返回值类型。详见[`ValueType`](#ValueType)      | `ValueType` | -           |
| startKey  | 当设置 valueType 为`stampobject`时，开始时间返回的 key | `string`    | 'startTime' |
| endKey    | 当设置 valueType 为`stampobject`时，结束时间返回的 key | `boolean`   | 'endTime'   |

其他属性见 antd [DatePicker](https://ant.design/components/date-picker-cn/#DatePicker)

### ValueType

```typescript
/**
 * timestamp  时间戳
 * timestring 时间字符串
 * stamparray 时间戳数组，[xxx, xxx]
 * stampobject 时间戳对象， { startTime: xxx, endTime: xxx }
 * /
type ValueType = 'timestamp' | 'timestring' | 'stamparray' | 'stampobject';
```

---
_Source: https://npm.io/package/@tawa/mario-date-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._