Programatically set values for `MDBDatePickerV5` using `valu


Topic: Programatically set values for `MDBDatePickerV5` using `value` prop

caio.davi asked 4 years ago

Expected behavior

The value prop should set the default value for the field.

Actual behavior

It doesn't.

Resources (screenshots, code snippets etc.)

Here is the way I'm doing it, please help me find out what I'm doing wrong:

const DateComponent = (props) => {

const passIfDate = (date) => date instanceof Date && !isNaN(date) ? date : null;

const handleDate = (date, field) => {
    if (date !== props.dateKeeper[field]) {
      let newKeeper = { ...props.dateKeeper };
      newKeeper[field] = date;
      props.setDateKeeper(newKeeper);
    }
};

return (
<div>
  <MDBDatePickerV5
    labelTitle="Date"
    value={passIfDate(props.dateKeeper.Date)}
    getValue={(e) => {
      handleDate(e, "Date");
    }}
  />
<MDBDatePickerV5
    labelTitle="ArrivalDate"
    value={passIfDate(props.dateKeeper.ArrivalDate)}
    getValue={(e) => {
      handleDate(e, "ArrivalDate");
    }}
  />
</div>
);
};

export default DateComponent;

caio.davi answered 4 years ago

UPDATE:

I downgraded to MDBTimePicker and this code seems to work well. Unfortunately, there were some inconsistences on the API described here. Also, the style doesn't work well. For example, I had to change labelTitle to label to have the label rendered, but the style doesn't work.

Do you have any kind of workarround to this?


Piotr Glejzer staff commented 4 years ago

hello,

sorry for waiting for that so long. No, we don't have a workaround about that.


Piotr Glejzer staff commented 4 years ago

hello,

sorry for waiting for that so long. No, we don't have a workaround about that.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.26.0
  • Device: MAC
  • Browser: Firefox
  • OS: MAC OS
  • Provided sample code: No
  • Provided link: No