Часть времени возврата только для часов formik

#reactjs #datetime #formik #formik-material-ui

Вопрос:

Я использую Formik TimePicker, так как все, что мне нужно, — это просто выбор времени пользователем, включая секунды, т. Е. format="HH:mm:ss"

Проблема, с которой я сталкиваюсь, заключается в том, что, когда я просматриваю конечный результат, я заметил, что он также возвращает дату и добавляет ее ко времени.

У меня есть пример кода здесь: CodeSandbox-таймер

Как вы можете видеть, когда вы выбираете время и нажимаете кнопку «Отправить», вы увидите эту дату вместе со временем.

Есть ли какие-либо способы просто вернуть только часть времени — format="HH:mm:ss"

1. Я не вижу никакого варианта для этого в документации, поэтому вам просто придется отформатировать его вручную. Это довольно легко сделать с помощью замены регулярного выражения, просто сделайте time = time.split(/T(.*)./g)[1];

Ответ №1:

Вам нужно отформатировать дату, и существует ряд библиотек, которые могут помочь в форматировании дат. Здесь я использую format с даты-fns

Так что просто отформатируйте дату, следуя:-

 import {format} from 'date-fns'; // import statement

...
...

format(values.time, 'HH:mm:ss') // format date with desired format

Рабочая демонстрация здесь: https://codesandbox.io/s/formik-time-picker-ixxxp

1. Есть ли какие-либо средства для выполнения этого форматирования как части события onChange в <TimePicker> компоненте?

2. Компонент TimePicker всегда будет возвращать комбинацию даты и времени, поэтому я думаю, что мы всегда должны форматировать дату на нашей стороне.

Ответ №2:

Вы можете получить время из даты-времени без использования каких-либо внешних библиотек, преобразовав строку в Date объект и используя toLocaleTime .

 const time  = new Date(values.time).toLocaleTimeString();
alert(time);