Ant Design 范围选择器 - 如何禁用未来(下)个月的箭头?
Ant Design range picker - how can i disable arrow of future (next) months?
我需要禁用第二个日历的未来(下一个)箭头。我该如何实施?
Calendar screenshot
import React from "react";
import { observer } from "mobx-react";
import { DatePicker } from "antd";
import classNames from "classnames";
import moment, { Moment } from "moment";
import styles from "./DatePicker.less";
import { RangePickerValue } from "antd/lib/date-picker/interface";
interface Props {
onChange: Function;
className?: string;
placeholder?: [string, string];
format?: string;
disableFutureDate?: boolean;
disabled?: boolean;
}
const { RangePicker: AntdDateRangePicker } = DatePicker;
@observer
export class DateRangePicker extends React.Component<Props> {
static defaultProps = {
format: "DD/MM/YYYY"
};
handleChange = (dates: RangePickerValue): void => {
const { onChange } = this.props;
onChange(dates);
};
private disableFutureDate = (current: Moment): boolean =>
this.props.disableFutureDate && current && current > moment().endOf("day");
render(): React.ReactChild {
const { className, ...rest } = this.props;
return (
<AntdDateRangePicker
{...rest}
disabledDate={this.disableFutureDate}
className={classNames(className, styles)}
onChange={this.handleChange}
/>
);
}
}
是组件渲染Range Picker。我们没有道具来添加箭头禁用功能。我们可以在不包含道具的情况下禁用它吗?例如,使用 css class?如果月份大于当前日期的月份 => 禁用未来月份的下一个箭头...
render(): React.ReactChild {
if (!this.model) {
return null;
}
const {
className,
withAutoComplete,
onSearchSettingsChange,
selectValue,
options,
name,
withSearchByUser,
withDateSearch,
searchBoardByDate
} = this.props;
return (
<div className={styles.searchWrapper}>
{withSearchByUser ? (
<div className={styles.leftColumnWrapper}>
<Icon name={name} className={styles.selectIcon} />
<Select
className={styles.searchOptions}
options={options}
onChange={onSearchSettingsChange}
value={selectValue}
dropdownMatchSelectWidth={false}
/>
<div className={classNames(styles.searchBox, className)}>
{withAutoComplete ? (
this.renderAutoCompleteSearch()
) : (
<>
<TextField
noLabel
name="value"
model={this.model}
onChange={this.handleChange}
className={styles.searchField}
/>
<span className={styles.iconClear}>
{this.model.value ? (
<Icon name="times" onClick={this.clearInput} />
) : (
<Icon name="search" className={styles.searchIcon} />
)}
</span>
</>
)}
</div>
{withDateSearch ? (
<div className={styles.rightColumnWrapper}>
<DateRangePicker
onChange={searchBoardByDate}
disableFutureDate
/>
</div>
) : null}
</div>
) : (
<div className={classNames(styles.searchBox, className)}>
{withAutoComplete ? (
this.renderAutoCompleteSearch()
) : (
<>
<TextField
noLabel
name="value"
model={this.model}
onChange={this.handleChange}
className={styles.searchField}
/>
<span className={styles.iconClear}>
{this.model.value ? (
<Icon name="times" onClick={this.clearInput} />
) : (
<Icon name="search" className={styles.searchIcon} />
)}
</span>
</>
)}
</div>
)}
</div>
);
}
我能够使用 RangePicker 的 dropdownClassName 属性 选择要删除的箭头,并且有 4 个不同的 类 用于不同的箭头。
https://codesandbox.io/s/dazzling-johnson-qdwjy
Test.js
import { DatePicker } from "antd";
import React from "react";
import "./Test.css";
const { RangePicker } = DatePicker;
export default () => {
const className = ["disable-arrow1", "disable-arrow3", "disable-arrow4"];
return <RangePicker dropdownClassName={className.join(" ")} />;
};
Test.css
.disable-arrow1 .ant-picker-header-super-prev-btn,
.disable-arrow2 .ant-picker-header-prev-btn,
.disable-arrow3 .ant-picker-header-next-btn,
.disable-arrow4 .ant-picker-header-super-next-btn {
visibility: hidden;
}
在 Test.js 中,您可以使用逻辑来决定应该禁用哪些箭头,并让 dropdownClassName 拥有那些 类。
如果你只想禁用按钮,我相信你可以使用 pointer-events: none;
而不是可见性,这将在 chrome 中工作,但可能不是所有浏览器。
希望它能帮助您了解它是如何实现的。
我需要禁用第二个日历的未来(下一个)箭头。我该如何实施?
Calendar screenshot
import React from "react";
import { observer } from "mobx-react";
import { DatePicker } from "antd";
import classNames from "classnames";
import moment, { Moment } from "moment";
import styles from "./DatePicker.less";
import { RangePickerValue } from "antd/lib/date-picker/interface";
interface Props {
onChange: Function;
className?: string;
placeholder?: [string, string];
format?: string;
disableFutureDate?: boolean;
disabled?: boolean;
}
const { RangePicker: AntdDateRangePicker } = DatePicker;
@observer
export class DateRangePicker extends React.Component<Props> {
static defaultProps = {
format: "DD/MM/YYYY"
};
handleChange = (dates: RangePickerValue): void => {
const { onChange } = this.props;
onChange(dates);
};
private disableFutureDate = (current: Moment): boolean =>
this.props.disableFutureDate && current && current > moment().endOf("day");
render(): React.ReactChild {
const { className, ...rest } = this.props;
return (
<AntdDateRangePicker
{...rest}
disabledDate={this.disableFutureDate}
className={classNames(className, styles)}
onChange={this.handleChange}
/>
);
}
}
是组件渲染Range Picker。我们没有道具来添加箭头禁用功能。我们可以在不包含道具的情况下禁用它吗?例如,使用 css class?如果月份大于当前日期的月份 => 禁用未来月份的下一个箭头...
render(): React.ReactChild {
if (!this.model) {
return null;
}
const {
className,
withAutoComplete,
onSearchSettingsChange,
selectValue,
options,
name,
withSearchByUser,
withDateSearch,
searchBoardByDate
} = this.props;
return (
<div className={styles.searchWrapper}>
{withSearchByUser ? (
<div className={styles.leftColumnWrapper}>
<Icon name={name} className={styles.selectIcon} />
<Select
className={styles.searchOptions}
options={options}
onChange={onSearchSettingsChange}
value={selectValue}
dropdownMatchSelectWidth={false}
/>
<div className={classNames(styles.searchBox, className)}>
{withAutoComplete ? (
this.renderAutoCompleteSearch()
) : (
<>
<TextField
noLabel
name="value"
model={this.model}
onChange={this.handleChange}
className={styles.searchField}
/>
<span className={styles.iconClear}>
{this.model.value ? (
<Icon name="times" onClick={this.clearInput} />
) : (
<Icon name="search" className={styles.searchIcon} />
)}
</span>
</>
)}
</div>
{withDateSearch ? (
<div className={styles.rightColumnWrapper}>
<DateRangePicker
onChange={searchBoardByDate}
disableFutureDate
/>
</div>
) : null}
</div>
) : (
<div className={classNames(styles.searchBox, className)}>
{withAutoComplete ? (
this.renderAutoCompleteSearch()
) : (
<>
<TextField
noLabel
name="value"
model={this.model}
onChange={this.handleChange}
className={styles.searchField}
/>
<span className={styles.iconClear}>
{this.model.value ? (
<Icon name="times" onClick={this.clearInput} />
) : (
<Icon name="search" className={styles.searchIcon} />
)}
</span>
</>
)}
</div>
)}
</div>
);
}
我能够使用 RangePicker 的 dropdownClassName 属性 选择要删除的箭头,并且有 4 个不同的 类 用于不同的箭头。 https://codesandbox.io/s/dazzling-johnson-qdwjy
Test.js
import { DatePicker } from "antd";
import React from "react";
import "./Test.css";
const { RangePicker } = DatePicker;
export default () => {
const className = ["disable-arrow1", "disable-arrow3", "disable-arrow4"];
return <RangePicker dropdownClassName={className.join(" ")} />;
};
Test.css
.disable-arrow1 .ant-picker-header-super-prev-btn,
.disable-arrow2 .ant-picker-header-prev-btn,
.disable-arrow3 .ant-picker-header-next-btn,
.disable-arrow4 .ant-picker-header-super-next-btn {
visibility: hidden;
}
在 Test.js 中,您可以使用逻辑来决定应该禁用哪些箭头,并让 dropdownClassName 拥有那些 类。
如果你只想禁用按钮,我相信你可以使用 pointer-events: none;
而不是可见性,这将在 chrome 中工作,但可能不是所有浏览器。
希望它能帮助您了解它是如何实现的。