[英]Ant Design range picker - how can i disable arrow of future (next) months?
我需要禁用第二个日历的未来(下一个)箭头。 我该如何实施?
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
测试.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(" ")} />;
};
测试.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 中可以使用的可见性,但可能不适用于所有浏览器。
希望它能帮助您了解它是如何可能的。
我需要禁用第二个日历的未来(下一个)箭头。 我该如何实施?
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.