CODEWITHSUNDEEP
reactjsdatepickersemantic-ui
soubhagya
soubhagya

Reputation: 806

React semantic-ui-date-picker default date not working

Here is my code:

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}
      />
    )
  }
}

Here i am using react-semantic-ui-datepickers for date picking functionality. Butm in my case i wants to keep one data by default that default date is coming from api so I am storing in state that initial date and using in datepicker.

But, it is not working. I checked some other questions still no sol. Please have a look

Upvotes: 0

Views: 2027

Answers (1)

kramnic
kramnic

Reputation: 33

Here is my solution, I hope it helps! The trick is to pass a Date Object to the value prop. In my case, the SemanticDatepicker is wrapped into another component that gets the default date from the API as the initial (default) pre-selected date.

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}
            />
        );
    }
}

Upvotes: 2

Related Questions