如圖:當(dāng)前日期:9號(hào);


image.png
正確應(yīng)該是這樣?jì)饍旱模?div id="u0z1t8os" class="image-package">

image.png
如圖:當(dāng)前日期:9號(hào);
import React, { useState } from 'react';
import 'antd/dist/antd.css';
import { DatePicker, Space } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import moment from 'moment';
const { RangePicker } = DatePicker;
const App = () => {
const [valueDate, setvalueDate] = useState('');
const onChange = (e) => {
console.log(moment(e).format('YYYY-MM-DD'), 'kjk');
setvalueDate(moment(e).format('YYYY-MM-DD'));
};
const onChanges = (e) => {
setvalueDate('');
};
const disabledDate: RangePickerProps['disabledDate'] = (current) => {
return current && current > moment().startOf('day');
};
const disabledDate1: RangePickerProps['disabledDate'] = (current) => {
return current && current > moment().subtract(1, 'days').endOf('day');
};
return (
<Space direction="vertical" size={12}>
錯(cuò)誤方式:
<DatePicker
disabledDate={disabledDate}
value={valueDate ? moment(valueDate, 'YYYY-MM-DD') : null}
onChange={onChange}
/>
<br />
正確方式:
<DatePicker disabledDate={disabledDate1} onChange={onChanges} />
</Space>
);
};
export default App;
擴(kuò)展
// 當(dāng)天之前的日期不可選
const disabledDate = (current) => {
return current && current < moment().subtract(1, 'days'); //當(dāng)天之前的不可選,不包括當(dāng)天
//return current && current < moment().endOf('day');當(dāng)天之前的不可選,包括當(dāng)天
};
// 當(dāng)天之后的日期不可選
const disabledDate = (current) => {
return current.getTime() > Date.now();
};
// 限制只能選今天及之前的日期(今天可選中)
const disabledDate = (current) => {
return current && current > moment().endOf('day');
};
// 限制只能選昨天及之前的日期(今天不可選中)
const disabledDate = (current) => {
return current && current > moment().subtract(1, 'days').endOf('day');
};
// 當(dāng)天日期不許被選擇,雙休不能被選擇
const disableDate = (date) => {
return (
(date && date < moment().endOf('day')) ||
date.isWeekday() == 6 ||
date.isWeekday() == 7
);
};
限制只能選昨天及之前的日期(今天不可選中)
current && current > moment().subtract(1, 'days').endOf('day');