46 lines
798 B
Plaintext
46 lines
798 B
Plaintext
---
|
|
name: Date Range
|
|
menu: Form
|
|
route: components/date-range
|
|
---
|
|
|
|
import { useState } from 'react';
|
|
import { Playground, Props } from 'docz';
|
|
import { DateRange } from '@ohif/ui';
|
|
|
|
# Date Range
|
|
|
|
Date Range is used to select a range of dates.
|
|
|
|
## Import
|
|
|
|
```javascript
|
|
import { DateRange } from '@ohif/ui';
|
|
```
|
|
|
|
## Date Range
|
|
|
|
<Playground>
|
|
{() => {
|
|
const [dates, setDates] = useState({
|
|
startDate: null,
|
|
endDate: null,
|
|
});
|
|
return (
|
|
<div className="p-4 flex flex-col items-center">
|
|
<DateRange
|
|
startDate={dates.startDate}
|
|
endDate={dates.endDate}
|
|
onChange={({ startDate, endDate }) =>
|
|
setDates({ startDate, endDate })
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
}}
|
|
</Playground>
|
|
|
|
## Properties
|
|
|
|
<Props of={DateRange} />
|