Время типа ввода не отправляет данные в нужном формате в React MUI

у меня есть текстовое поле с типом = время, оно принимает ввод в формате «чч: мм AM/PM», но отправляет значение только в формате «чч: мм»

проверить здесь

как отправить ввод в том же формате, который пользователь ввел в текстовое поле?

код для поля ввода

 <TextField
              sx = {{
                '& input[type = "time"]::-webkit-calendar-picker-indicator': {
                  filter:
                    "invert(78%) sepia(66%) saturate(6558%) hue-rotate(84deg) brightness(27%) contrast(16%)",
                  paddingRight: "8px",
                },
              }}
              name = "startTime"
              type = "time"
              id = "startTime"
              value = {values.startTime}
              onChange = {handleChangeEvent}
            />

код для обработки и отправки значения времени

const initialValues = { startTime: "" };
  const { values, errors, touched, handleBlur, handleChangeEvent, 
         handleSubmit } =
        useFormik({
          enableReinitialize: true,
          initialValues,
          onSubmit: async (values, action) => {
            try {
                     let response = await axios.patch(
                    `${state.baseUrl}plan`,
                    {start_time: values.startTime},
               );
    }

Пожалуйста, опубликуйте свой код

Ajmal Noushad 10.01.2023 07:55

@AjmalNoushad готово, могу я тоже опубликовать код обработки API?

Asra Fatima 10.01.2023 08:25

да, а также включить функцию handleChangeEvent

Ajmal Noushad 10.01.2023 08:26

добавьте код, и я использую handleChangeEvent formik

Asra Fatima 10.01.2023 08:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, вы используете нативный ввод type = "time". И он всегда будет возвращать время в 24-часовом формате, даже если видимое значение находится в 12-часовом формате.

То есть, если вы выберете 11:59 PM во входных данных, значение, которое вы получите, будет «23:59», что соответствует 24-часовому формату. Это ограничение собственного ввода времени.

Подробнее: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#time_value_format

Таким образом, в этом случае вам нужно будет вручную преобразовать строку времени в формате 24 часа в строку времени в 12 часов.


const convert24to12 = (time) => {
  // Extract hours and minutes from the time string
  const hours = parseInt(time.slice(0, 2));
  const minutes = time.slice(3, 5);

  // Determine AM or PM
  const amOrPm = hours >= 12 ? 'PM' : 'AM';

  // Convert hours to 12-hour format
  const twelveHourTime = `${(hours % 12) || 12}:${minutes} ${amOrPm}`;

  return twelveHourTime;
}

     <TextField
        //other props
        onChange = {e => {
          const 12hourString = convert24to12(e.target.value);
          // Using setFieldValue from formik
          setFieldValue("startTime", 12hourString)
        }}
     />

Лучшим решением было бы использовать пользовательское средство выбора времени, из которого вы можете выводить время. Я вижу, вы используете MUI, который уже предоставляет хороший компонент выбора времени здесь: https://mui.com/x/react-date-pickers/getting-started/.

Другие вопросы по теме