1

I'm confused about how to handle react-dates[DateRangePicker] onDatesChange and onFocusChange because they have two values each. onDatesChange should be able to set multiple values i.e both start date and end date.

I was trying to build a custom wrapper around the daterangepicker with formik.

Check console for errors

`<div className="form-group">
    <label>DatePickerWithFormik</label>
    <Field component={DatePickerWithFormik} name="DatePickerWithFormik" 
    className="form-control" />
</div>`

`export const DatePickerWithFormik = ({ startDateId, endDateId, form: { setFieldValue, setFieldTouched }, field, ...props }) => {
    const [focused, setFocused] = useState(null); // this will be removed
    return(
        <div>
            {/* {console.log('Inside datpicer', field.name)} */}
            <DateRangePicker 
                {...props}
                startDateId="startDateId"
                endDateId="endDateId"
                onDatesChange={(value) => 
                field.onChange(setFieldValue(field.name, value) )}
                onFocusChange={focused => setFocused(focused)}
                focusedInput={focused}
                startDate={field.startDate}
                endDate={field.endDate}
            />
            {/* {console.log(field)} */}
        </div>
    );
};
`
  1. Expected result: Should be able to save both start and end dates in local state and display it on screen.

Refer working link: https://codesandbox.io/s/l72w6n8l0m

srinatht
  • 143
  • 1
  • 13

1 Answers1

2

You need to initialize your form with startDate and endDate:

const formInitialValues = {
  // DatePickerWithFormik: null
  startDate: null,
  endDate: null
};

then set the onDatesChange like this: onDatesChange={handleDatesChange} and in the handleDatesChange function update the values:

const handleDatesChange = ({ startDate, endDate }) => {
    setStartDate(startDate);
    setEndDate(endDate);
    setFieldValue("startDate", startDate);
    setFieldValue("endDate", endDate);
  };

Demo: https://codesandbox.io/s/m39w2onqky

Edit:
As you wouldn't use any state you can use the form values property like this:

<DateRangePicker
        startDate={values.startDate}
        startDateId="tata-start-date"
        endDate={values.endDate}
        endDateId="tata-end-date"
        onDatesChange={handleDatesChange}
        focusedInput={focusedInput}
        onFocusChange={focusedInput => setFocusedInput(focusedInput)}
      />

working demo: https://codesandbox.io/s/ppv546qxz7

Fraction
  • 11,668
  • 5
  • 28
  • 48
  • Hi @Fraction, Thanks for your approach, but what I am trying to make is different, I was trying to write a wrapper component around date picker which uses formik's internal state without declaring any state. See below example without declaring any explicit state I am using formik's internal state. onChange={(value) => setFieldValue(field.name, value) } onBlur={() => setFieldTouched(field.name, true)} – srinatht Apr 01 '19 at 11:42
  • Thank you for your great work, I do agree with your updated approach, I have one more question, I mean the initial values should come from the component which is using date picker. Currently, in date-picker, we mentioned startDate and endDate which is coming from the component which is using it, The component which is using datepicker can have any names like startMe or endMe. setFieldValue("startDate", startDate); setFieldValue("endDate", endDate); How can we make it more generic to the datepicker itself ? – srinatht Apr 01 '19 at 12:18
  • You can put your variables inside the `datePickerWithFormik` object and access them with `Object.keys`, look at this demo: https://codesandbox.io/s/73mm0n71jx – Fraction Apr 01 '19 at 13:00
  • As you see there is still dependency datePickerWithFormik obj used in date picker component. The datePickerWithFormik is coming from the component which is using date picker. The way I wanted to make a date picker is generic to itself without having any state or obj dependency from any one component which is using date picker. – srinatht Apr 02 '19 at 06:50
  • Try to comment `startDate/endDate` from `formInitialValues` in the second demo and it will work as expected – Fraction Apr 02 '19 at 09:26