DatePicker disable error

Question

I want to create a component, which consists of Datepicker and ChoiceGroup using ReactJs and office365. On first render datepicker must be disabled, and when we choose custom radio button in ChoiceGroup it must be enabled.Piece of code:

<div>
                    <ChoiceGroup
                        defaultSelectedKey='all'
                        onChange={ this._onChange }
                        label='Date'
                        options={ [
                            {
                                key: 'all',
                                text: 'All'
                            },
                            {
                                key: 'thisWeek',
                                text: 'This week',
                            },
                            {
                                key: 'lastWeek',
                                text: 'Last week',
                            },
                            {
                                key: 'thisMonth',
                                text: 'This month',
                            },
                            {
                                key: 'custom',
                                text: 'Custom',
                            }
                        ] }

                    />

                            <DatePicker
                                label='label'
                                isRequired={ false }
                                disabled={ pickerDisabled }
                                strings={ strings }
                                allowTextInput={ false }
                                value={ value }
                            />

                </div>

picker has disabled param and I wanted to change it in ChoiceGrou method:

onChange = (ev, option) => {
        console.dir(option);
        if(option.key === 'custom') {
            this.setState({
                pickerDisabled: false
            })
        } else {
            this.setState({
                pickerDisabled: true
            })
        }
    }

This method works and changes parameter, but datepicker component's disable doesnt change. it remains the same and I got error in console when I click any radio button:

Exception in DatePicker.componentWillReceiveProps(): TypeError: date1.getFullYear is not a function

What can be the reason of this error?

score 1 · Accepted Answer · answered Aug 24 '17 at 15:48

It appears that you are passing an invalid value to the DatePicker component, my guess (without more context/info) is that value is null/undefined by default and DatePicker defaults to the current day, but the value is being set by the radio buttons and it's a not a valid value (based on the error, it looks like DatePicker is expecting a Date object (it's trying to call getFullYear() on it), but value is a string).

Check the DatePicker component's documentation for what it expects in its value prop and update accordingly.

you are right I put new Date() to value and it works,thank you — Sam Fisher, Aug 25 '17 at 08:27

DatePicker disable error

1 Answers1