React-native-datefield NPM

react-native-datefield

Installation

yarn add react-native-datefield

or

npm install react-native-datefield

Usage

import DateField from 'react-native-datefield';

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

Run yarn in repo root
Run yarn example android or yarn example ios
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)
/>