0

I'm having trouble binding the minDate and maxDate of two date pickers ("begin" and "end) using ExtReact 6.5.2. Here is the code sample:

import React, { Component } from 'react';
import { Container, DatePickerField, FormPanel, TextField } from '@extjs/ext-react';

export default class MyExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            beginPickerValue: null,
            endPickerValue: null
        };
    }

    render() {
        return (
            <Container layout="center">
                <FormPanel
                    defaults={{ clearable: true, editable: false }}
                    shadow
                >
                    <DatePickerField
                        label="Begin"
                        onChange={(datePicker, newValue) => this.setState({beginPickerValue: newValue})}
                        maxValue={this.state.endPickerValue}
                    />
                    <DatePickerField
                        label="End"
                        onChange={(datePicker, newValue) => this.setState({beginPickerValue: newValue})}
                        minValue={this.state.endPickerValue}
                    />
                </FormPanel>
            </Container>
        )
    }
}

In my setup, using Chrome, I get the following error:

Uncaught Error: Date object or string in dateFormat required
    at new Ext.Error (ext.js:5817)
    at Function.raise (ext.js:5843)
    at Object.Ext.raise (ext.js:5860)
    at constructor.applyMaxDate (ext.js:59619)
    at constructor.setter [as setMaxDate] (ext.js:8892)
    at Ext.Configurator.configure (ext.js:9171)
    at constructor.initConfig (ext.js:9771)
    at constructor (ext.js:13108)
    at constructor (ext.js:23660)
    at constructor.callParent (ext.js:9746)

I've used the exact code above in Sencha's "Examples" section for DatePickerField (see below links). The code runs and the fields are rendered, but the max and min bindings do not appear to be observed when setting dates.

Please note that as of this writing, in order to demo you'll have to use Sencha's "Examples" code block within the ExtReact 6.5.1 docs to replicate. When using the DatePickerField example code block for versions 6.5.2 or 6.5.3, you get the following error even when attempting to run Sencha's default sample code:

Uncaught ReferenceError: Ext is not defined
    at app.js:1

I would provide a fiddle using Sencha's own ExtReact fiddler, but that too, seems to have problems running its own sample code. :/

As I understand it, there should be no need for additional functions or need to trigger from an event. Within React, the changes to state should appropriately reconfigure the maxDate and minDate configurations for the DateFieldPicker.

Any help is greatly appreciated...

Jasel
  • 535
  • 8
  • 14
  • Because you are passing `null` values in `maxDate` & `minDate` in DatePickerField. You can't pass null for details please read the [docs](https://docs.sencha.com/extreact/6.5.1/modern/Ext.field.Date.html#cfg-maxDate) – Narendra Jadhav Apr 15 '18 at 09:16
  • @N. Jadhav - The docs also mention that the _default_ is null, so why would you not be able to "re-set" to a null after having a value? Your proposal might explain the error I'm getting in local environment, however, the assignment of a null appears perfectly acceptable when using the embedded "fiddle" at the top of the very documents page you link. Please feel free to paste my code sample to see how binding a null value does not throw an error. The problem is the non-observance of a proper date for max or min. – Jasel Apr 15 '18 at 13:51
  • If you pass some some date in min or max date it will work. The reason of error is `null`. If you want to check please some value in min or max date. – Narendra Jadhav Apr 15 '18 at 18:22
  • @N. Jadhav - What you state is simply incorrect, at least for version 6.5.1 of ExtReact. Again, I implore you to try my sample code within the embedded "fiddle" on the ExtReact 6.5.1 `DatePickerField` documents page (linked above). You'll see that it is perfectly acceptable to set a null value for `maxDate` or `minDate`. The issue is that date values passed in for `maxDate` or `minDate` are _not observed_ by the pickers (they don't actually limit date selection). My initial concern really turned out to be twofold. Please see my self-provided answer for discoveries with respect to both. – Jasel Apr 16 '18 at 00:19

1 Answers1

0

The functionality of the minDate and maxDate apparently ceased to work properly in 6.5.1 (was working in 6.5.0) as reported to Sencha.

Apparently, the minDate and maxDate properties were then removed from the DatePickerField component in version 6.5.2 of ExtReact and remain missing in version 6.5.3. The associated getters and setters were also removed.

Jasel
  • 535
  • 8
  • 14