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)}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- 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
Mateusz Lazaru staff commented 1 year ago
Hi,
defaultDate
anddefaultTime
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.