Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Time input with validation and simple mask
import React from 'react';
import { Input } from 'semantic-ui-react';
class TimeInput extends React.Component {
state = {
time: '',
}
handleChange = (event, { name, value }) => {
value = value.replace(":", "")
if (value.length > 4)
return
const values = value.split("")
var formated = ""
values.forEach((element) => {
if (formated.length === 2)
formated += ":"
formated += element
})
var isValid = false;
formated.split(":").forEach((element, index) => {
const padded = this.padZero(element)
if (index === 0 && Number(padded) <= 23) {
isValid = true
} else if (index === 1 && Number(padded) <= 59) {
isValid = true
} else {
isValid = false
}
})
if (isValid && this.state.hasOwnProperty(name)) {
this.setState({ [name]: formated });
}
}
padZero = (num) => {
var s = num + "";
while (s.length < 2) s = s + "0";
return s;
}
checkNumber = (event) => {
if (!/[0123456789:]/.test(String.fromCharCode(event.which))) {
event.preventDefault()
}
}
render() {
return <Input
icon="time"
name="time"
placeholder='00:00'
value={this.state.time}
onChange={this.handleChange}
onKeyPress={this.checkNumber}
/>
}
}
export default TimeInput
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.