---
title: TimePicker 时间选择框 (done)
order: 37
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## 使用

### 使用原则

### 基本使用

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

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

export default () => (
  <div>
    <Row gutter={24}>
      <Col span={12}>
        <TimePicker
          onChange={onChange}
          defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
          style={{ width: 224 }}
        />
      </Col>
      <Col span={12}>
        <TimePicker
          defaultValue={moment('12:08:23', 'HH:mm:ss')}
          disabled
          style={{ width: 224 }}
        />
      </Col>
    </Row>
  </div>
);
```

### 时间范围选择器

```jsx
import React from 'react';
import { TimePicker, Row, Col } from 'quanta-design';
const { RangePicker } = TimePicker;
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>
);
```