I want to accept only 1-24 in the input field and disable all other buttons. how is it possible

Question

This is my input field and I want to accept only 1-24 and disable all other keys. How can this be achieved in react.

                    <TextFieldCustom
                    placeholder="Enter checkin hours"
                    value={e.target.value}
                    onChange={onChangeHandler}
                    maxLength={3}
                    type=number
                    onKeyDown={onKeyDown}
          
                  />

Answer 1

here is the change handler of your case without specifying type="number" :

const [text, setText] = useState('');
  const changeHandler = (e: any) => {
    const val = e.target.value;
    if ((val >=1 && val <= 24) || val === '') {
      setText(val);
    }
  };

return (
 <TextFieldCustom
   placeholder="Enter checkin hours"
   value={text}
   onChange={changeHandler}
   onKeyDown={onKeyDown}
  />
);