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

License

MIT