Unable to display the date in desired format using DateTimePicker, Moment, and LocalizationProvider in my react component

37 views Asked by At

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. UI to pick the DateTime

0

There are 0 answers