# PickerView

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/picker-view
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

The PickerView series includes three components: [PickerView](#pickerview), [CascadePickerView](#cascadepickerview) and [DatePickerView](#datepickerview).

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

The PickerView series includes three components: [PickerView](#pickerview), [CascadePickerView](#cascadepickerview) and [DatePickerView](#datepickerview).

## PickerView

PickerView is the content area of [Picker](/components/picker/#picker).

### Demos

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| columns | Options to configure each column | `PickerColumn[] \| ((value: PickerValue[]) => PickerColumn[])` | - |
| defaultValue | Default selected options | `PickerValue[]` | `[]` |
| mouseWheel | Whether to allow interact with mouse wheel | `boolean` | `false` |
| onChange | Triggered when the options are changed | `(value: PickerValue[], extend: PickerValueExtend) => void` | - |
| renderLabel | The function to custom rendering the label shown on a column | `(item: PickerColumnItem) => ReactNode` | `(item) => item.label` |
| value | Selected options | `PickerValue[]` | - |
| loading | Should the Picker displays as loading state | `boolean` | `false` |
| loadingContent | The loading content displayed in loading state | `ReactNode` | `provide a default SpinLoading content` |

For the type definition of `PickerColumnItem` `PickerColumn` `PickerValue` `PickerValueExtend`, please refer to the document of [Picker](/components/picker).

### CSS Variables

| Name | Description | Default |
| --- | --- | --- |
| --height | Height of PickerView. | `240px` |
| --item-font-size | Font size of option items. | `16px` |
| --item-height | Height of option item. Only supports px rem and vw units. | `34px` |

## CascadePickerView

CascadePickerView is the content area of [CascadePicker](/components/picker/#cascadepicker).

### Demos

### Props

| Name    | Description              | Type                    | Default |
| ------- | ------------------------ | ----------------------- | ------- |
| options | Data of the tree options | `CascadePickerOption[]` | -       |

For the type definition of `CascadePickerOption`, please refer to the document of [CascadePicker](/components/picker/#cascadepicker).

Other props are the same as [PickerView](#pickerview), but `columns` are not supported.

### CSS Variables

Same as `PickerView`.

## DatePickerView

DatePickerView is the content area of [DatePicker](/components/picker/#datepicker).

### Demos

### Props

```typescript
type PickerDate = Date & {
  tillNow?: boolean
}
```

| Name | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | Default selected options | `PickerDate` | - |
| filter | Filter available time | `DatePickerFilter` | - |
| max | Max value | `PickerDate` | ten years later |
| min | Minimum value | `PickerDate` | ten years ago |
| mouseWheel | Whether to allow interact with mouse wheel | `boolean` | `false` |
| onChange | Triggered when the options are changed | `(value: PickerDate) => void` | - |
| precision | Precision | `'year' \| 'month' \| 'day' \| 'hour' \| 'minute' \| 'second' \| 'week' \| 'week-day' \| 'quarter'` | `'day'` |
| renderLabel | The function to custom rendering the label shown on a column. `type` means any value in `precision`, `data` means the default number | `(type: string, data: number) => ReactNode` | - |
| value | Selected options | `PickerDate` | - |
| loading | Should the Picker displays as loading state | `boolean` | `false` |
| loadingContent | The loading content displayed in loading state | `ReactNode` | `provide a default SpinLoading content` |
| tillNow | Show till now in list | `boolean` | - | 5.32.0 |

For the type definition and usage of `DatePickerFilter`, please refer to the document of [DatePicker](/components/picker#datepicker).

### CSS Variables

Same as `PickerView`.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt