# xa-date-picker

> 包含以下三个组件:DatePicker、MonthPicker、RangePicker

Latest version **0.0.2** (published 2018-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install xa-date-picker
pnpm add xa-date-picker
yarn add xa-date-picker
bun add xa-date-picker
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2018-11-29 |
| First published | 2018-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 19 |
| Unpacked size | 18 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | xxaq |

## Links

- npm: https://www.npmjs.com/package/xa-date-picker
- npm.io page: https://npm.io/package/xa-date-picker

## Dependencies (19)

- [react](https://npm.io/package/react.md) ^16.2.0
- [moment](https://npm.io/package/moment.md) ^2.22.2
- [webpack](https://npm.io/package/webpack.md) ^4.20.2
- [xa-icon](https://npm.io/package/xa-icon.md) ^1.0.8
- [react-dom](https://npm.io/package/react-dom.md) ^16.5.2
- [css-loader](https://npm.io/package/css-loader.md) ^0.28.9
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.1.0
- [rc-calendar](https://npm.io/package/rc-calendar.md) ^9.7.10
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.1.2
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.2
- [style-loader](https://npm.io/package/style-loader.md) ^0.19.1
- [rc-time-picker](https://npm.io/package/rc-time-picker.md) ^3.4.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.1.0
- [styled-components](https://npm.io/package/styled-components.md) ^4.0.2
- [gregorian-calendar](https://npm.io/package/gregorian-calendar.md) ^4.1.6
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.0.0
- [webpack-node-externals](https://npm.io/package/webpack-node-externals.md) ^1.6.0
- [gregorian-calendar-format](https://npm.io/package/gregorian-calendar-format.md) ^4.1.3
- [@babel/plugin-transform-object-assign](https://npm.io/package/@babel/plugin-transform-object-assign.md) ^7.0.0

## Recent versions

- 0.0.2 (latest) — 2018-11-29
- 0.0.1 — 2018-11-28
- 0.0.0 — 2018-10-31

## README

# XaDatePicker 

包含以下三个组件:DatePicker、MonthPicker、RangePicker


## Date Picker & Month Picker
### 引用

```JavaScript
import DatePicker from 'xa-date-picker';

const {MonthPicker,RangePicker} = DatePicker;
```
### 使用示例
```JavaScript
        <div>
            <label>基本用法:</label>
            <DatePicker placeholder="基本用法" onChange={this.onChange} />
        </div>
        <div>
          <label>format:</label>
          <DatePicker placeholder="format" format={dateFormat} />
        </div>
        <div>
          <label>禁用状态:</label>
          <DatePicker placeholder="禁用状态" disabled />
        </div>
        <div>
          <label>禁止选择部分日期:</label>
          <DatePicker placeholder="禁止选择部分日期" disabledDate={this.disabledDate} />
        </div>
        <div>
          <label>extra footer:</label>
          <DatePicker placeholder="extra footer" renderExtraFooter={() => 'extra footer'} />
        </div> 

        <div>
          <label>快捷操作:</label>
          <DatePicker
            placeholder="请选择日期"
            onClick={() => this.setState({ open2: true })}
            onChange={this.onChange}
            value={this.state.value2}
            open={this.state.open2}
            shortcuts={[{
              text: '今天',
              onClick: (picker) => {
                this.setState({
                  value2: moment(new Date()),
                  open2: false
                })
              }
            }, {
              text: '昨天',
              onClick: (picker) => {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                this.setState({
                  value2: moment(date),
                  open2: false
                })
              }
            }, {
              text: '一周前',
              onClick: (picker) => {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                this.setState({
                  value2: moment(date),
                  open2: false
                })
              }
            }]}
          />
        </div>
```
### Props

| 参数 | 说明 | 类型 | 默认值 | 
| ------ | ------ | ------ |------ |
| allowClear | 是否显示清除按钮 | `boolean` | true |
| className | 类名 | `string` |  |
| dateRender | 自定义日期单元格的内容 | `function(currentDate: moment, today: moment) => React.ReactNode` |	- |
| defaultValue | 默认日期 | `moment` | - |
| disabled | 禁用状态 | `boolean` | false |
| disabledDate | 禁用的日期 | `function(moment):boolean` | - |
| format | 展示的日期格式 |	`string` | "YYYY-MM-DD"| 
| shortcuts | 快捷 | `[]`| - |
| showTime | 时间选择 |	 | "YYYY-MM-DD"| 
| showTime.defaultValue | 默认时间 | `moment` |  | 
| disabledTime | 禁用的时间 | `function(moment):boolean` |  | 
| locale | 国际化配置,注意需要先设置 moment 的 locale |  | zhCN |
| open | picker 展开状态 | `boolean` | - |
| onOpenChange | picker 展开状态变化触发 | `function(boolean) ` | - | 	
| placeholder | 占位符 | `string` |  |

## Range Picker

### 使用示例
```html
<RangePicker
  selectedValue={this.state.value}
  startPlaceholder="请选择开始日期"
  endPlaceholder="请选择结束日期"
  shortcuts={[{
    text: '本周',
    onClick: (picker) => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      this.setState({
        value: [moment(date), moment(new Date())]
      })
    }
  }]}
/>
```

### Props

`RangePicker` 的大多数参数与 `DatePicker` 相同,但需要注意的是其 `value` 为 `moment[]`

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