Material date picker library for react native

Material date picker library for react native

Documentation Documentation

React Native Material Date Picker

:star2: Features

  • Easy usage
  • Material design
  • Easy localizable

:arrow_down: Installation

Install by npm or yarn

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

or

yarn add react-native-material-date-picker

Usage

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

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

Config

ParamsTypeDefaultDescription
localestringenLanguage of the picker
colorstring#00B0FFThe selected date color
styleStyle-Style of the picker container
onSelectfunc-Run after selection of a date
onForwardfunc-Run after go forward a day
onBackfunc-Run after go back a day
onHiddenfunc-Run after hidden the picker (only ModalDatePicker)
isHideOnSelectbooleanfalseDetermines whether the modal will be closed (only ModalDatePicker)
initialDateDateNowInitial date for picker (only ModalDatePicker)
languageJSON File-Your custom language file for months and days (Example)

:warning: Dependency

Note on the legacy CLI

There seems to be quite some confusion about the legacy CLI. This template only works with the new CLI. Make sure you have uninstalled the legacy react-native-cli first (npm uninstall -g react-native-cli), for the below command to work. If you wish to not use npx, you can also install the new CLI globally (npm i -g @react-native-community/cli or yarn global add @react-native-community/cli).

Check it on GitHub