[Dúvida] Horário em PM/AM

import React from "react"; import Button from "../Button"; import style from "./forms.module.scss"; class Forms extends React.Component { state = { task: "", time: "00:00", }; render() { return ( <form className={style.newTask}> <div className={style.inputContainer}> <label htmlFor="task">Add a new study</label> <input type="text" name="task" id="task" placeholder="what do you want to study today?" required /> </div> <div className={style.inputContainer}> <label htmlFor="time">Time</label> <input type="time" step="1" name="time" value={this.state.time} onChange={event => this.setState({...this.state, time: event.target.value})} id="time" min="00:00:00" max="01:30:00" required pattern="\d{2}:\d{2}" /> </div> <Button>Add</Button> </form> ); } } export default Forms;

E aí, Matheus!

Isso pode ser culpa de alguma config do seu sistema ou navegador. Nunca usei Ubuntu, mas pelo que pesquisei a saída é criar um input customizado. O HTML e JavaScript não dão muita flexibilidade pra mudar esse formato do "time" direto.

Dá uma olhada nesse exemplo que montei pra você:

class Forms extends React.Component {
  state = {
    task: "",
    hour: "00",
    minute: "00"
  };

  render() {
    return (
      <form className={style.newTask}>
        <div className={style.inputContainer}>
          <label htmlFor="task">Vamos estudar o quê?</label>
          <input
            type="text"
            name="task"
            id="task"
            placeholder="Qual matéria vai encarar hoje?"
            required
          />
        </div>
        <div className={style.inputContainer}>
          <label htmlFor="time">Hora</label>
          <input
            type="number"
            name="hour"
            value={this.state.hour}
            onChange={event => this.setState({...this.state, hour: event.target.value})}
            id="hour"
            min="00"
            max="23"
            required
          />
          :
          <input
            type="number"
            name="minute"
            value={this.state.minute}
            onChange={event => this.setState({...this.state, minute: event.target.value})}
            id="minute"
            min="00"
            max="59"
            required
          />
        </div>
        <Button>Add</Button>
      </form>
    );
  }
}

export default Forms;

Nesse exemplo, separei as horas e minutos em inputs numéricos. Assim, você tem mais controle sobre o formato.

Espero q te ajude!