import { 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