Automatic backslash for Date Text Input React Native?

12,601

Solution 1

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).

Solution 2

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.

Solution 3

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

Share:
12,601
Tamsyn Jennifer
Author by

Tamsyn Jennifer

I am a self-taught coder coming from a Theatre and Arts background. 🎨 πŸŽ₯ I love React Native πŸ“±almost as much as I love the sun and travelling! β˜€οΈ 🌴 🌍 πŸŒ»πŸ‰! I started learning Swift in 2017 then switched over to React Native at the beginning of 2018. I also use AWS Cognito, Amplify and AppSync... Open source is amazing and I am so grateful for all the free material which is available online! I would not have been able to learn coding without it.

Updated on June 17, 2022

Comments

  • Tamsyn Jennifer
    Tamsyn Jennifer about 2 years

    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).

  • Tamsyn Jennifer
    Tamsyn Jennifer over 5 years
    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.
  • Tamsyn Jennifer
    Tamsyn Jennifer over 5 years
    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.
  • vicky keshri
    vicky keshri over 3 years
    This is working fine, but onPress of back button "/" is not getting removed. any suggestion to achieve this.?
  • Vivek Kumar
    Vivek Kumar over 3 years
    You need to make changes in dateTimeInputChangeHandler method
  • vicky keshri
    vicky keshri over 3 years
    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; });
  • kd12345
    kd12345 over 3 years
    @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.