Enter date easily with react-native-datefield

In the course of implementing a few projects, I have found that users who use the selection date function in applications often have difficulty choosing years in the past.

Hence, I developed the react-native-datefield library to make it easier for the users to enter date data.
The react-native-datefield library has great support in terms of both user interface and functional performance. It validates the entered date data, leap years, allows customization of layout input and returns errors if the user enters incorrect data.

Components:

DateMonthYearField
MonthDateYearField
YearMonthDateField

Usage

import DateField from 'react-native-datefield';

const DateField = require('react-native-datefield');

<DateField
  labelDate='Enter date'
  labelMonth='Enter month'
  labelYear='Enter year'
  defaultValue={new Date()}
  styleInput={styles.inputBorder}
  onSubmit={(value) => console.log(value)}
/>

<MonthDateYearField
  styleInput={styles.inputBorder}
  onSubmit={(value) => console.log('MonthDateYearField', value)}
/>

<YearMonthDateField
  styleInput={styles.inputBorder}
  onSubmit={(value) => console.log('YearMonthDateField', value)}
/>

const styles = StyleSheet.create({
  inputBorder: {
    width: '30%',
    borderRadius: 8,
    borderColor: '#cacaca',
    borderWidth: 1,
    marginBottom: 20,
  },
});

View more example App.tsx.

My repo on Github react-native-datefield

Thanks for reading !

Blog

Enter date easily with react-native-datefield

tuantvk

Components:

Usage

Join Our Newsletter. No Spam, Only the good stuff.

Related