Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How can I create an input mask for MM/YY

$
0
0

I want to create a React Native input component for a credit card expiration date.

I believe I should input mask should be in the format for MM/YY. I'm not sure about autofill with autoCompleteType="cc-exp" and textContentType="creditCardNumber".

How can this be done without a library and only javascript/typescript?

InputCreditCardExpirationDate.tsx

  // React Hooks: State  const [value, setValue] = useState<string>('');  const formatMMY = (string: string): string => {    // HOW?  };  // On Change  const onChange = (text: string): void => {    // MM/YY    text = formatMMY(text);    if (text.length >= 1) {      // Set State      setValue(text);      // Props: On Change Text      onChangeText(text);    }  };  return (<Input      value={value}      placeholder={placeholder || 'Expires'}      label={label ? label : 'Expires'}      keyboardType="numeric"      onChangeText={onChange}      autoCompleteType="cc-exp" // Android Only      textContentType="creditCardNumber" // iOS Only      maxLength={7}      darkMode={darkMode || false}    />  );

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>