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

28 lines
628 B
Plaintext

import { ArgsTable } from '@storybook/addon-docs/blocks';
import { DatePicker } from './DatePicker';
# DatePicker
A component with a calendar view for selecting a date.
### Usage
```tsx
import React, { useState } from 'react';
import { DatePicker, Button } from '@grafana/ui';
const [date, setDate] = useState<Date>(new Date());
const [open, setOpen] = useState(false);
return (
<>
<Button onClick={() => setOpen(true)}>Show Calendar</Button>
<DatePicker isOpen={open} value={date} onChange={(newDate) => setDate(newDate)} onClose={() => setOpen(false)} />
</>
);
```
### Props
<ArgsTable of={DatePicker} />