9

Does anyone know how to create a text input that when you start typing in it, it automatically allows for a certain amount of digits with an automatic backslash separation for the numbers.

DD / MM / YYYY (I am not looking to use a date picker or library).

3 Answers 3

5

Try this react component:

https://github.com/benhurott/react-native-masked-text

INSTALL

npm install react-native-masked-text --save

USAGE

render() {
//the type is required but options is required only for some specific types.
  return (
    <TextInputMask
      refInput={(ref) => this.myDateText = ref;}
      type={'datetime'}
      options={{
        format: 'DD-MM-YYYY HH:mm:ss'
      }}
    />
  )
}

there's one type of mask that is suitable for you:

datetime: use datetime mask with moment format (default DD/MM/YYYY HH:mm:ss). It accepts options (see later in this doc).

1
  • Thanks for your answer! I have seen this library but I was looking to know if anyone knew how to code this without using a library. Nov 2, 2018 at 12:37
1

You could use something like this:

<TextInput
  onChangeText={(text) => this.handleTextChange({text})}
  value={this.state.text}
/>

In handleTextChange() do whatever you need to the insered text and than set it to the state

1
  • 1
    Is it possible though to then edit the date - I can change it to a static string but I am not sure how to add an backslashes with empty spaces " _ _ / _ _ / _ _ _ _ " and make that editable? So that the user starts typing the number and it automatically replaces the _ or even just an empty space with a number. Nov 3, 2018 at 16:20
1
checkValue(str, max) {
    if (str.charAt(0) !== '0' || str == '00') {
      var num = parseInt(str);
      if (isNaN(num) || num <= 0 || num > max) num = 1;
      str = num > parseInt(max.toString().charAt(0))
      && num.toString().length == 1 ? '0' + num : num.toString();
    };
    return str;
  };
    this.type = 'text';
    var input = e.target.value;
    var expr = new RegExp(/\D\/$/);
    if (expr.test(input)) input = input.substr(0, input.length - 3);
    var values = input.split('/').map(function(v) {
      return v.replace(/\D/g, '')
    });
    if (values[0]) values[0] = this.checkValue(values[0], 12);
    if (values[1]) values[1] = this.checkValue(values[1], 31);
    var output = values.map(function(v, i) {
      return v.length == 2 && i < 2 ? v + '/' : v;
    });
    this.setState({
      registrationDate:output.join('').substr(0, 14)
    })
  }
<input type="text" className="input-attr" maxLength="25" onChange={(e) => this.dateTimeInputChangeHandler(e)}
                           placeholder={translationData.datePlaceholderText}
                           value={this.state.registrationDate}/>

You can implement it using something like this. onchange event will help process input.

4
  • This is working fine, but onPress of back button "/" is not getting removed. any suggestion to achieve this.? Dec 1, 2020 at 6:22
  • You need to make changes in dateTimeInputChangeHandler method Dec 1, 2020 at 8:41
  • yea, I am trying that, but couldn't able to achieve that. Back Press is working fine but because of this function I am not able to apply changes. var output = values.map(function(v, i) { return v.length == 2 && i < 2 ? v + '/' : v; }); Dec 1, 2020 at 9:12
  • @VivekKumar hi i know its been a while but i am trying to do the same in react native but for some reason it is not working, do you mind helping me out.
    – kd12345
    Feb 8, 2021 at 5:29

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.