Automatic backslash for Date Text Input React Native?

react-native textinput
Tamsyn Jennifer picture Tamsyn Jennifer · Oct 31, 2018 · Viewed 7.6k times · Source

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

Answer

Diego Felipe picture Diego Felipe · Oct 31, 2018

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

Related questions

Disable Options on React-Native Text Input

I am using TextInput for a project and wanted to DISABLE any kind of text selection or actions like (cut/copy/paste/share) as shared in the screenshot below. I am not able find anything in the react-native official documentation

Read More
React Native multi line TextInput, text is centered

So when using, text input with multiline=true, I have this issue where the text is vertically centered instead of being pushed to the top. This issue happens on both ios and android, except android has another issue where, when …

Read More
How to autofocus next TextInput on react-native

I'm trying to create a passcode protected screen. The screen will uses 4 numeric input as the passcode. The way I'm doing this is create a TextInput Component and call it 4 times in my main screen. The problem I'm having is …

Read More