import { ArgTypes } from '@storybook/addon-docs/blocks'; import { DatePicker } from './DatePicker';

DatePicker

A component with a calendar view for selecting a date.

Usage

tsx

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