---
nav:
  title: 组件
  order: 1
group:
  title: Data Entry
  order: 1
title: PisellReservationSchedule
order: 1
category: pro
---

# PisellReservationSchedule 预约营业日导航

深色圆角样式的**营业日切换条**：左侧「上一天」、中间日期与星期文案、右侧「下一天」。语言与日期格式跟随低代码引擎 `locale`（通过
`useEngineContext`），可与 `PisellTimeNavigator` 组合为 `PisellReservationScheduleBand`。

## 何时使用

- 预约、订座等业务需要按「营业日」切换主数据视图的顶栏
- 需要限制可选日期范围（`minDate` / `maxDate`）
- 已与 `PisellTimeNavigator` 搭配，只需单独换日条时

## 代码演示

### 基础用法（非受控）

`defaultValue` 支持可解析的日期字符串（与 `Dayjs` 实例等价，由组件内部解析）。

```tsx
import {PisellReservationSchedule} from '@pisell/materials';

export default () => {
    return (
        <PisellReservationSchedule defaultValue="2024-06-15"/>
    );
};
```

### 受控用法

受控时 `value` 可为字符串或 `Dayjs`；下方用字符串存 state，在 `onChange` 里用回调参数 `d` 转回字符串（无需在示例中引入
dayjs）。

```tsx
import {useState} from 'react';
import {PisellReservationSchedule} from '@pisell/materials';

export default () => {
    const [value, setValue] = useState('2024-06-15');

    return (
        <PisellReservationSchedule
            value={value}
            onChange={(d) => setValue(d.format('YYYY-MM-DD'))}
        />
    );
};
```

### 限制可选区间

`minDate` / `maxDate` 同样支持字符串。

```tsx
import {PisellReservationSchedule} from '@pisell/materials';

export default () => {
    return (
        <PisellReservationSchedule
            defaultValue="2024-06-15"
            minDate="2024-06-01"
            maxDate="2024-06-30"
        />
    );
};
```

## API

### PisellReservationScheduleProps

| 属性           | 说明              | 类型                         | 默认值 |
|--------------|-----------------|----------------------------|-----|
| value        | 当前选中日（受控），日历日语义 | `ReservationScheduleValue` | -   |
| onChange     | 选中日变更           | `(date: Dayjs) => void`    | -   |
| defaultValue | 非受控初始日          | `ReservationScheduleValue` | -   |
| minDate      | 不可早于该日（含）       | `ReservationScheduleValue` | -   |
| maxDate      | 不可晚于该日（含）       | `ReservationScheduleValue` | -   |
| className    | 根节点类名           | `string`                   | -   |
| style        | 根节点样式           | `CSSProperties`            | -   |

`ReservationScheduleValue` 与 `PisellTimeNavigator` 一致：`Dayjs`、可解析的日期字符串或 `null` / `undefined`。

## 行为说明

- **受控**：传入 `value` 时由外部驱动；仅传 `defaultValue` 时为非受控内部状态。
- **边界**：切换日时若超出 `minDate` / `maxDate`，会夹紧到合法日；到达边界时对应按钮 `disabled`。
- **文案**：中间区域在「今天」时前置 `today` 文案；中英繁由 `locales.init` 与引擎 `locale` 决定；英文日期格式为 `MMM D`，中文为
  `M月D日`。
- **组合**：上层若使用 `PisellReservationScheduleBand`，一般无需再单独挂载本组件（Band 内部已包含）。
