DEV Community

tuantvk
tuantvk

Posted on

5 2

Enter date easily with react-native-datefield

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';
Enter fullscreen mode Exit fullscreen mode

or

const DateField = require('react-native-datefield');
Enter fullscreen mode Exit fullscreen mode
<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,
  },
});
Enter fullscreen mode Exit fullscreen mode

View more example App.tsx.

My repo on Github react-native-datefield

Thanks for reading !

Sentry mobile image

Is your mobile app slow? Improve performance with these key strategies.

Improve performance with key strategies like TTID/TTFD & app start analysis.

Read the blog post

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay