input mask for time

[nik72619c]

Could anyone provide an example for time mask for example 12:54 AM/PM

[ghost]

I made only for hh:mm, but you can improve it

const TIME_MASK = [/^([0-2])/, /([0-9])/, ":", /[0-5]/, /[0-9]/]

[oleg-prikhodko]

I made only for hh:mm, but you can improve it

const TIME_MASK = [/^([0-2])/, /([0-9])/, ":", /[0-5]/, /[0-9]/]

Yes, but that way one could enter incorrect value such as 29:59 A workaround solution would be to change second regexp based on first character of input's value Something like this:

function TimeInput() {
  const [time, setTime] = useState('')
  const startsWithTwo = time[0] === '2'

  const handleInput = ({ target: { value } }) => setTime(value)

  const mask = [
    /[0-2]/,
    startsWithTwo ? /[0-3]/ : /[0-9]/,
    ':',
    /[0-5]/,
    /[0-9]/
  ]
  return <InputMask mask={mask} onChange={handleInput} value={time} />
}

[reintroducing]

@demkovych @oleg-prikhodko How are you guys even getting regexps to work as a mask? See https://github.com/sanniassin/react-input-mask/issues/197 because I can't get it to take anything (regexp there taken directly from this issue).

[oleg-prikhodko]

@demkovych @oleg-prikhodko How are you guys even getting regexps to work as a mask? See #197 because I can't get it to take anything (regexp there taken directly from this issue).

Seems strange. I copy-pasted regex-array from that issue but wasn't able to recreate your case. What version of React are you using it with?

[reintroducing]

@oleg-prikhodko We are using React 16.9.0 and react-input-mask 2.0.4. Is this a 3.x+ feature?

[oleg-prikhodko]

@reintroducing Looks like it. I'm on 3.0.0-alpha.0. v2 doc says mask should be a string

[reintroducing]

ah, i think this repo master should be whats published in npm and keep 3 alpha on a branch. it makes it confusing, or there should be a note in the README that these docs are for 3.x, etc. But Im probably preaching to the choir here :)

[oleg-prikhodko]

@reintroducing Actually is is mentioned in README)

Although I agree that keeping alpha version on master is not the best choice

[reintroducing]

son of a b! i stand corrected, i just can't read.

[chupapee]

I made only for hh:mm, but you can improve it

const TIME_MASK = [/^([0-2])/, /([0-9])/, ":", /[0-5]/, /[0-9]/]

Yes, but that way one could enter incorrect value such as 29:59 A workaround solution would be to change second regexp based on first character of input's value Something like this:

function TimeInput() {
  const [time, setTime] = useState('')
  const startsWithTwo = time[0] === '2'

  const handleInput = ({ target: { value } }) => setTime(value)

  const mask = [
    /[0-2]/,
    startsWithTwo ? /[0-3]/ : /[0-9]/,
    ':',
    /[0-5]/,
    /[0-9]/
  ]
  return <InputMask mask={mask} onChange={handleInput} value={time} />
}

I made some changes and now it works properly:

const startWithTwo = value[0] === '2'
const otherCases = ['0', '1'].includes(value[0])

const mask = [
  /[0-2]/,
  startsWithTwo ? /[0-3]/ : otherCases && /[0-9]/,
  ':',
  /[0-5]/,
  /[0-9]/
]