import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { TimeRangeInput } from './TimeRangeInput';

# TimeRangeInput

A variant of `TimeRangePicker` for use in forms.

`dateTime(null)` can be used to provide empty time range value. The shape of the return value on input clear is:

```javascript
{
  from: dateTime(null),
  to: dateTime(null),
  raw: {
    from: dateTime(null),
    to: dateTime(null),
  },
};
```

`dateMath.isValid()` from `@grafana/data` can be used to check for a valid time range value.


### Usage

```jsx
import { TimeRangeInput } from '@grafana/ui';

<TimeRangeInput
  value={timeRange}
  onChange={range => console.log('range', range)}
  onChangeTimeZone={tz => console.log('timezone', tz)}
/>
```

### Props
<Props of={TimeRangeInput} />