Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: DateTimePicker controlled value

jammerxd2 priority asked 1 year ago


Expected behavior

I can set the value property of the MDBDateTimePicker to keep it in sync with the app state

Actual behavior

Setting the value property of MDBDateTimePicker does not initialize the picker to the app state value (for example: opening an edit modal on an item)

Resources (screenshots, code snippets etc.)

I also tried generating the MDBDateTimePicker and putting the defaultDate and defaultTime in as the app state value, however this did not work and only runs once. The below code sample does not work either. If the modal opens and it's a new item, I want the input blank, if the modal opens and we're editing an item, it should show the value from the app state.

const getDefaultTime = (value)=>{
    if(StringIsNullOrWhiteSpace(value)) return "";
    if(!value.includes(",")) return "";
    let split = value.split(",");
    if(split.length > 1)
    {
        return split[1];
    }
    return "";
}

const getDefaultDate = (value)=>{
    if(StringIsNullOrWhiteSpace(value)) return "";
    if(!value.includes(",")) return "";
    let split = value.split(",");
    if(split.length > 1)
    {
        return split[0];
    }
    return "";
}


const generateDateTimePickerForValue = (value,label,onChangeFn)=>{
        return <MDBDateTimepicker inline inputToggle label={label}
        defaultDate={getDefaultDate(value)}
        defaultTime={getDefaultTime(value)}
        onChange={(e)=>{onChangeFn(e)}}  required/>
    }

From the return() of the component where selectedDateTime is a state variable as a string:

{generateDateTimePickerForValue(selectedDateTime,"Selected DateTime",onSelectedDateTimeChanged)}

Mateusz Lazaru staff commented 1 year ago

Hi, defaultDate and defaultTime are not affecting the input, because they are only for setting the initial state. However, there should be a way to create a controlled picker. At the moment it is impossible.

We are aware of the limitations related to controlled elements and are actively working on adding this functionality to various components, including the DateTimepicker.


jammerxd2 priority commented 1 year ago

Any ideas when this will be fixed?


Mateusz Lazaru staff commented 1 year ago

It is not yet certain, but probably at the next major release, around 2 months.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 6.2.0
  • Device: PC
  • Browser: Firefox
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No