Время не отображается должным образом в React
Я хотел правильно отображать время на основе значений, которые я установил в useState. Он должен отображать 9:00 AM. Почему это его отображение Invalid Time Format.
Пожалуйста, проверьте мои коды и ящик здесь
<MuiPickersUtilsProvider utils = {DateFnsUtils}>
<KeyboardTimePicker
inputVariant = "outlined"
size = "small"
mask = "__:__ _M"
value = {format(new Date(selectedTime), "hh:mm:00 a")}
onChange = {handleTimeChange}
KeyboardButtonProps = {{ disabled: true, style: { display: "none" } }}
/>
</MuiPickersUtilsProvider>
Нет, его проблема решена в моем ответе, можете попробовать в его кодах и ящике
@ThomasHoffner Я спрашивал ОП, намеренно ли они используют старую версию date-fns. Этот вопрос не связан с возможными решениями.
Значение, которое вы передаете KeyboardTimePicker, должно соответствовать ожидаемому формату, а не тому формату, в котором вы хотите, чтобы оно отображалось. Сама строка формата в порядке, ошибка исходит от компонента выбора, а не от date-fns.
Ответы 1
Отредактируйте эту часть кода:
value = {format(new Date(selectedTime), "hh:mm:00 a")}
К этому:
value = {format(new Date(selectedTime), "yyyy-MM-dd''HH:mm:ss")}
Или это:
value = {format(new Date(selectedTime), 3)}
И это должно работать хорошо, проверьте эту ссылку на документацию: https://date-fns.org/v2.16.1/docs/format
Отмечая, что OP использует версию 1.3.13.
Вы намеренно используете довольно старую версию date-fns?