antd-mobile@5.x DatePicker设置max 和min
时间: 2024-03-08 21:50:22 浏览: 124
要设置 antd-mobile@5.x 版本的 DatePicker 的最大值和最小值,可以使用 `minDate` 和 `maxDate` 属性。
例如,要将最小日期设置为当前日期,最大日期设置为当前日期的一个月后,可以这样写:
```jsx
import React, { useState } from 'react';
import { DatePicker } from 'antd-mobile';
function App() {
const [date, setDate] = useState(new Date());
const minDate = new Date();
const maxDate = new Date();
maxDate.setMonth(maxDate.getMonth() + 1);
return (
<DatePicker
mode="date"
title="选择日期"
value={date}
minDate={minDate}
maxDate={maxDate}
onChange={(date) => setDate(date)}
>
<div>选择日期</div>
</DatePicker>
);
}
export default App;
```
在这个例子中,我们首先使用 `useState` 钩子来创建一个名为 `date` 的状态变量,并将其初始值设置为当前日期。
然后,我们创建了两个日期对象 `minDate` 和 `maxDate`,分别表示最小日期和最大日期。在这个例子中,我们将最小日期设置为当前日期,而最大日期设置为当前日期的一个月后。
最后,我们将 `minDate` 和 `maxDate` 属性传递给 `DatePicker` 组件,并使用 `onChange` 属性来更新 `date` 状态变量的值。
阅读全文