react-native-datefield

A simple React Native date input component

Installation

yarn add react-native-datefield

or

npm install react-native-datefield

Usage

import DateField from 'react-native-datefield';

or

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

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

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

<DateField
  editable={false}
  styleInput={styles.inputBorder}
  maximumDate={new Date(2023, 3, 10)}
  minimumDate={new Date(2021, 4, 21)}
  handleErrors={() => console.log('ERROR')}
/>

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

Props

Property	Default	Option	Description
testID	-	string	used to locate this view in end-to-end tests
containerStyle	-	ViewStyle	styling for view containing the input
styleInput	-	TextStyle	style that will be passed to the style props of the React Native TextInput
styleInputYear	-	TextStyle	style only for year input
labelDate	Date	string	add a label for date input
labelMonth	Month	string	add a label for month input
labelYear	Year	string	add a label for year input
value	-	Date	defines the date value used in the component
defaultValue	-	Date	an initial value that will change when the user starts typing
onSubmit	-	(Date) => {}	callback that is called when blur and return Date value ISO 8601 format
editable	true	boolean	if false, text is not editable
autoFocus	false	boolean	if true, auto focus to the first input
hideDate	false	boolean	if true, Date input is not display, only support DateField
placeholderTextColor	-	string	the text color of the placeholder string
maximumDate	-	Date	defines the maximum date that can be filled
minimumDate	-	Date	defines the minimum date that can be filled
handleErrors	-	void	this is called when the user fills the date invalid

Example

MonthDateYearField

Display fields according to month -> date -> year.

import { MonthDateYearField } from 'react-native-datefield';

<MonthDateYearField
  labelDate='Enter date'
  labelMonth='Enter month'
  labelYear='Enter year'
  containerStyle={styles.containerStyle}
  onSubmit={(value) => console.log('MonthDateYearField', value)}
/>

const styles = StyleSheet.create({
  containerStyle: {
    borderRadius: 15,
    backgroundColor: '#f4f4f4',
    paddingHorizontal: 25,
    marginBottom: 20,
  },
});

YearMonthDateField

Display fields according to year -> month -> date.

import { YearMonthDateField } from 'react-native-datefield';

<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,
  },
});

momentjs

Use momentjs parse value from onSubmit function.

Example:

import DateField from 'react-native-datefield';
import moment from 'moment';

<DateField
  onSubmit={(value) => console.log(moment(value).format("DD/MM/YYYY"))}
/>

View more example App.tsx.

Running the example app

1. Run yarn in repo root
2. Run yarn example android or yarn example ios
3. Run yarn example start to start Metro Bundler

Troubleshooting

When using maximumDate or minimumDate return wrong value

If you use maximumDate or minimumDate, you should set default date to new Date().

Example:

// don't
<DateField
  ...
  maximumDate={new Date()}
  minimumDate={new Date()}
/>

// do
<DateField
  ...
  maximumDate={new Date(2023, 3, 10)} // new Date(year, monthIndex, day)
  minimumDate={new Date(2021, 4, 21)} // new Date(year, monthIndex, day)
/>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Contributors

tuantvk 💻 🚧 📖 💡

maxiromanoff 📖

License

MIT