How to force default value of date to selected date automatically?

[haendzel]

Hello,

I have an application with a Dashboard with a main calendar (another library - React Calendar). When you select a date, I have an active date state.

I have a form for adding visit - date day is from state of active date (from React Calendar selected).
I also have a form for edit visit - date day is from API.

I have a problem with your library react-datepicker. I have two datepickers in my form. I also use react hooks-form library.
One is day selection and second is for hour selection. I know we can do it in one, but I do it according to the client's design.

This active date from React Calendar is the default value for react-datepicker (only for date select).

The problem is that this default value is not selected at all, because when I click Submit, the value is empty. The value is only when you click on react-datepicker and select the day manually. I also gave in the value field as the active date, but then the date does not change.

I've tried several possible ways, but I have no idea how to make the active date value auto-selected in react-datepicker.

Below is my code:

Select day:

            <div className="form-couple">
              <div className="field">
                <label>Day</label>
                <div className="position-relative">
                  <InputIcon>
                    <StyledCalendarIcon />
                  </InputIcon>
                  <Controller
                    control={control}
                    defaultValue={startDate}
                    name="date"
                    {...register("date", {
                      required: true,
                    })}
                    render={({ field }) => (
                      <DatePicker
                        locale="pl"
                        className="react-date-picker__wrapper"
                        placeholderText="Select date"
                        dateFormat="dd.MM.yyyy"
                        minDate={new Date()}
                        selected={field.value}
                        onChange={(date) => {
                          setStartDate(date);
                          field.onChange(date);
                        }}
                      />
                    )}
                  />
                </div>
                {errors?.date?.type === "required" && (
                  <ErrorMessage>Date value is empty</ErrorMessage>
                )}

Select hour:

 <div className="field">
                  <label>Hour</label>
                  <div className="position-relative">
                    <InputIcon>
                      <StyledWatchIcon />
                    </InputIcon>
                    <Controller
                      control={control}
                      defaultValue={startDate} 
                      name="time"
                      {...register("time", {
                        required: true,
                      })}
                      render={({ field }) => (
                        <DatePicker
                          locale="pl"
                          className="react-time-picker__wrapper"
                          placeholderText={"Select Hour"}
                          showTimeSelect
                          showTimeSelectOnly
                          selected={field.value}
                          timeIntervals={15}
                          filterTime={filterPassedTime}
                          minTime={setHours(setMinutes(startDate, 0), 6)}
                          maxTime={setHours(setMinutes(startDate, 0), 22)}
                          timeCaption=""
                          dateFormat="HH:mm"
                          minDate={today}
                          onChange={(time) => {
                            field.onChange(time);
                            setIsTimeBetweenBool(
                              isTimeBetween(
                                "6:00",
                                "22:01",
                                moment(time).format("HH:mm")
                              )
                            );
                            if (
                              new Date(startDate).setHours(0, 0, 0, 0) ==
                                new Date().setHours(0, 0, 0, 0) &&
                              time < new Date()
                            ) {
                              setIsFutureDate(false);
                            } else {
                              setIsFutureDate(true);
                            }
                          }}
                        />
                      )}
                    />
                  </div>
                  {!isFutureDate &&
                    new Date(startDate).setHours(0, 0, 0, 0) ===
                      new Date().setHours(0, 0, 0, 0) && (
                      <ErrorMessage>
                       Please select hour from future.
                      </ErrorMessage>
                    )}

                  {!isTimeBetweenBool && (
                    <ErrorMessage>
                     Please select hour between <br />{" "}
                      6:00 - 22:00.
                    </ErrorMessage>
                  )}

                  {errors?.time?.type === "required" && (
                    <ErrorMessage>Hour is empty</ErrorMessage>
                  )}
                </div>

I will be grateful for your help or any idea.

All the best,
Filip

[miller-productions]

My hypothesis is that it has something to do with the way you are using selected={field.value} in the attributes of <DatePicker

I've used DatePicker along with react-hook-form in a similar way to what you have but in my version, I use the local state as the value to pass to the selected attribute. e.g. in your case, that looks like it would be selected={startDate} instead.

What do you think?