import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
import * as DatePickerStories from './datepicker.stories.tsx'

<Meta of={DatePickerStories} />

# GridEditorDatePicker

```tsx
import { GridEditorDatePicker } from '@planview/pv-grid'
```

The date picker editor enables users to select a date from a calendar. It inherits all the functionality of the [DatePicker](?path=/docs/pv-uikit-datepicker--docs) component, including support for different date formats, validation, and accessibility features.

<Canvas of={DatePickerStories.Default} />

### Props provided by the Grid (via `Editor`)

Additional props are provided by the grid that are not used by this editor.

<Controls include={['onConfirm', 'onCancel', 'tabIndex']} />

### Props to customize behavior

<Controls exclude={['onConfirm', 'onCancel', 'tabIndex']} />

## Usage with Column definition

This component should be used as part of a custom `Editor` method on the Column configuration.

```tsx
import { GridEditorDatePicker, Column } from '@planview/pv-grid'

const EditableColumn: Column = {
    id: 'date',
    label: 'DatePicker Editor',
    sortable: false,
    movable: false,
    width: 300,
    cell: {
        editable: true,
        Renderer(props) {
            return <GridCellDefault {...props} />
        },
        Editor(props) {
            return <GridEditorDatePicker {...props} />
        },
    },
}
```