A Simple And Beautiful Material Design Date Picker For React Native


Category: React React DatePicker | June 27, 2021
Author:ilkerkesici
Official Page:Go to website
Last Update:June 27, 2021
License:MIT

Description:

Are you creating a application, where you need to integrate a Date Picker? Then, your search ends here. I’m sharing with you a simple and beautiful material design Date Picker, that you will love.

Features:

  • Easy to implement
  • Material design
  • Supports multiple languages (for now EN, TR)

How to use it?

First install the component via NPM.

npm install --save react-native-material-date-picker

Or, you may install it using Yarn.

yarn add react-native-material-date-picker

Then, import the Date Picker component.

import { ModalDatePicker } from "react-native-material-date-picker";

Now integrate the Date Picker component.

const App = () => {
  return (             
      <View style={{flex: 1, alignSelf: 'stretch'}}>
        <ModalDatePicker 
            button={<Text> Open </Text>} 
            locale="tr" 
            onSelect={(date) => console.log(date) }
            isHideOnSelect={true}
            initialDate={new Date()}
            language={require('./locales/en.json')}. # Your localization file
        />             
      </View>
  );
};

Configuration:

ParamsTypeDefaultDescription
localestringenLanguage of the picker
colorstring#00B0FFThe selected date color
styleStyleStyle of the picker container
onSelectfuncRun after selection of a date
onForwardfuncRun after go forward a day
onBackfuncRun after go back a day
onHiddenfuncRun after hidden the picker (only ModalDatePicker)
isHideOnSelectbooleanfalseDetermines whether the modal will be closed (only ModalDatePicker)
initialDateDateNowInitial date for picker (only ModalDatePicker)
languageJSON FileYour custom language file for months and days