---
order: 5
title: 时间范围选择
---

````jsx
import TimePickerField from '@alicd/crui-time-picker-field';
import { Form, Grid, moment } from '@alicd/next';

const {Row, Col} = Grid;

class App extends React.Component {
  render(){
    return <Form>
      <Form.Item labelCol={{fixedSpan: 4}} wrapperCol={{span: 14}} label="选择范围">
          <Col fixedSpan={9}>
            <TimePickerField />
          </Col>
          <Col fixedSpan={1} className="align-center">
              -
          </Col>
          <Col fixedSpan={10}>
            <TimePickerField />
          </Col>
      </Form.Item>
    </Form>
  }
}

ReactDOM.render(<App />, mountNode);
````

```` template
<Form>
  <Form.Item labelCol={{fixedSpan: 4}} wrapperCol={{span: 14}} label="选择范围">
      <Col fixedSpan={9}>
        <TimePickerField />
      </Col>
      <Col fixedSpan={1} className="align-center">
          -
      </Col>
      <Col fixedSpan={10}>
        <TimePickerField />
      </Col>
  </Form.Item>
</Form>
````