grafana/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.mdx

import { Story, Preview, ArgTypes } from '@storybook/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

<ArgTypes of={TimeRangeInput} />