---
title: DatePicker 日期选择框 (done)
order: 36
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## 使用

### 使用原则

### 基本使用

```jsx
import React from 'react';
import { DatePicker, Row, Col, Space } from 'quanta-design';
const { RangePicker } = DatePicker;
import moment from 'moment';

function onChange(date, dateString) {
  console.log(date, dateString);
}

const style = {
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-around',
  width: '250px',
  height: '300px',
};

export default () => (
  <div>
    <Row gutter={24}>
      <Col span={12}>
        <div style={style}>
          <DatePicker disabled />
          <DatePicker onChange={onChange} />
          <DatePicker onChange={onChange} picker="week" />
          <DatePicker onChange={onChange} picker="month" />
          <DatePicker onChange={onChange} picker="quarter" />
          <DatePicker onChange={onChange} picker="year" />
        </div>
      </Col>
      <Col span={12}>
        <div style={style}>
          <RangePicker disabled />
          <RangePicker />
          <RangePicker showTime style={{ width: 400 }} />
          <RangePicker picker="week" />
          <RangePicker picker="month" />
          <RangePicker picker="year" />
        </div>
      </Col>
    </Row>
  </div>
);
```

<!-- ### 日期范围选择器

```jsx
import React from 'react';
import { DatePicker, Row, Col } from 'quanta-design';
const { RangePicker } = DatePicker;
import moment from 'moment';

function onChange(time, timeString) {
  console.log(time, timeString);
}

export default () => (
  <div>
    <Row gutter={24}>
      <Col span={12}>
        <RangePicker />
      </Col>
      <Col span={12}>
        <RangePicker disabled />
      </Col>
    </Row>
  </div>
); -->

```

```