I want to display the input in "DD MM YYYY, hh:mm" format inside the below input box. However I am unable to attach the ","in between Date and Time. Currently the input timeSlot is using moment as show below and the UI looks something like below where I want to display the time upon selection. Moreover, I also wanted to change the placeholder for the timepiker input which is "MM/DD/YYYY hh:mm aa" to have a comma as well. My component that takes the timeSlot looks like this.
<LocalizationProvider dateAdapter={AdapterMoment}>
{selectedTimeSlots.map(
(timeSlotItem: Date | null, index: number) => (
<div
key={index}
style={{
display: "flex",
alignItems: "center",
marginBottom: "10px",
}}
>
<DateTimePicker
value={moment(timeSlotItem)}
timezone={selectedTimeZone}
onChange={(newValue) =>
handleDateTimeChange(index, newValue)
}
slotProps={{
textField: {
size: "small",
sx: {
width: "100%",
backgroundColor: "white",
},
},
}}
minDate={moment(new Date())} // Disables dates from the past
thresholdToRenderTimeInASingleColumn={120}
/>
<Button
onClick={() => removeTimeSlot(index)}
disabled={selectedTimeSlots.length <= 1} // Disable the button if there's only one option
>
<CloseIcon />
</Button>
</div>
)
)}
When I am trying to use moment(timeSlotItem).format("desired_formatter") It is throwing an error TypeError: pt.isUTC is not a function as well.
