-2

Alguém conhece alguma máscara React para entrada de horas onde o formato não é HH:mm. Vou utilizar para definir o tempo em horas de projeto e alguns deles podem ter mais de 24h. Exemplo 120:00 horas, 200:00 horas e ai vai. As máscaras que consegui só serviam para o formato 24h. Estou usando a lib react-input-mask e aparentemente ela não aceita regex

                             <InputMask
                                type="text"
                                style={{
                                  padding: ' 8px 8px',
                                  fontSize: '1rem',
                                  borderStyle: 'solid',
                                  borderRadius: '5px',
                                  outline: ' transparent',
                                  width: '50%',
                                }}
                                {...register(`${index}.horasLancadasFormatada`)}
                                mask={'999:99'}
                                placeholder={`${value.horasLancadasFormatada}`}
                              ></InputMask>

1 Resposta 1

-2

Já testou a lib Text Mask Addons?

Imagino que o que você procura seja algo como:

import React, { Component } from "react";
import MaskedInput from "react-maskedinput";

const styles = {
  fontFamily: "sans-serif"
};

class App extends Component {
  state = {
    time: ""
  };

  setInput = valueKey => event => {
    const { value } = event.target;
    this.setState({ [valueKey]: value });
  };

  render() {
    const { time } = this.state;
    return (
      <div style={styles}>
        <h1>
          <pre>react-maskedinput</pre>
        </h1>
        <label>
          time2:{" "}
          <MaskedInput
            value={time}
            onChange={this.setInput("time2")}
            mask="WWW:11"
            placeholder="000:00"
            size="11"
            formatCharacters={{
              W: {
                validate(char) {
                  return /\d+/.test(char);
                },
                transform(char) {
                  return char;
                }
              }
            }}
          />
          <pre>Value: {time}</pre>
        </label>
      </div>
    );
  }
}

Um exemplo pode ser observado em react-text-mask time example - codesandbox

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .