Question

这是我的代码：

import SemanticDatepicker from 'react-semantic-ui-datepickers'
class InsightsTable extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      initial_value: '2012-10-20',
    }
  }

  render() {
    const { initial_value } = this.state
    return (
      <SemanticDatepicker
        selected={(initial_value, 'DD-MM-YYYY')}
        onChange={this.handleFromDate}
      />
    )
  }
}

在这里，我正在使用react-semantic-ui-datepickers作为日期选择功能。在我的情况下，Butm我想默认保留一个数据，默认日期来自api，因此我正在存储初始日期的状态并在datepicker中使用。

但是，它不起作用。我检查了其他一些问题，仍然没有解决方案。请看看

Answer 1

这是我的解决方案，希望对您有所帮助！诀窍是将Date对象传递给 value 道具。就我而言，SemanticDatepicker被包装到另一个组件中，该组件从API获取默认日期作为初始（默认）预选日期。

export class DateInput extends Component {
  constructor(props) {
    super(props);

    const d = new Date(this.props.date);
    const initialDateValue = d;
  
    this.state = {
      defaultDateValue: initialDateValue,
    };
  }

   handleChange = (e, data) => {

if (data.value) {
  const newDateValue = new Date(data.value);
  return this.setState({ defaultDateValue: newDateValue });
} else {
  return data.value;
}

};

  render() {
    return (
      <SemanticDatepicker
        label="Date"
        id="transactionDate"
        format="DD/MM/YYYY"
        required={this.props.required}
        onChange={this.handleChange.bind(this)}
      
        showToday={true}
        value={this.state.defaultDateValue}
      />
    );
  }
}

反应语义UI日期选择器默认日期不起作用

1 个答案: