只能选择同一天的datePicker

迈不过友情╰ 2021-10-23 10:19 362阅读 0赞

//moment().dayOfYear()一年中的第几天

1 import { DatePicker } from 'antd';
     2 
     3 class DateRange extends React.Component {
     4   state = {
     5     endOpen: false,
     6     formValues: { 
     7       strDate: null, 
     8       endDate: null
     9     },
    10   };
    11 
    12     disabledStartDate = strDate => {
    13     const { formValues: {endDate} } = this.state;
    14     if (!strDate || !endDate) {
    15       return false;
    16     }
    17     return moment(strDate).dayOfYear() !== moment(endDate).dayOfYear();
    18   };
    19 
    20   disabledEndDate = endDate => {
    21     const { formValues:{strDate} } = this.state;
    22     if (!endDate || !strDate) {
    23       return false;
    24     }
    25     return moment(strDate).dayOfYear() !== moment(endDate).dayOfYear();
    26   };
    27 
    28   onChange = (field, value) => {
    29     this.setState({
    30       formValues:{...this.state.formValues,[field]: value},
    31     });
    32   };
    33 
    34   onStartChange = value => {
    35     this.onChange('strDate', value);
    36   };
    37 
    38   onEndChange = value => {
    39     this.onChange('endDate', value);
    40   };
    41 
    42   handleStartOpenChange = open => {
    43     if (!open) {
    44       this.setState({ endOpen: true });
    45     }
    46   };
    47 
    48   handleEndOpenChange = open => {
    49     this.setState({ endOpen: open });
    50   };
    51 
    52   render() {
    53     const { formValues: { strDate, endDate }, endOpen } = this.state;
    54     return (
    55       <div>
    56         <DatePicker
    57           disabledDate={
        this.disabledStartDate}
    58           showTime
    59           format="YYYY-MM-DD HH:mm:ss"
    60           value={startValue}
    61           placeholder="Start"
    62           onChange={
        this.onStartChange}
    63           onOpenChange={
        this.handleStartOpenChange}
    64         />
    65         <DatePicker
    66           disabledDate={
        this.disabledEndDate}
    67           showTime
    68           format="YYYY-MM-DD HH:mm:ss"
    69           value={endValue}
    70           placeholder="End"
    71           onChange={
        this.onEndChange}
    72           open={endOpen}
    73           onOpenChange={
        this.handleEndOpenChange}
    74         />
    75       </div>
    76     );
    77   }
    78 }
    79 
    80 ReactDOM.render(<DateRange />, mountNode);

转载于:https://www.cnblogs.com/TJ-Wong/p/11198925.html