у меня есть текстовое поле с типом = время, оно принимает ввод в формате «чч: мм 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},
);
}
@AjmalNoushad готово, могу я тоже опубликовать код обработки API?
да, а также включить функцию handleChangeEvent
добавьте код, и я использую handleChangeEvent formik
Похоже, вы используете нативный ввод 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/.
Пожалуйста, опубликуйте свой код