0.0.5 • Published 2 years ago
react-native-date-picker-material v0.0.5
React Native Material Date Picker
:star2: Features
- Easy usage
- Material design
- Easy localizable
:star: ScreenShot
:arrow_down: Installation
Install by npm or yarn
npm i react-native-date-picker-material
or
yarn add react-native-date-picker-materialUsage
import { ModalDatePicker } from "react-native-date-picker-material";
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
| Params | Type | Default | Description |
|---|---|---|---|
| locale | string | en | Language of the picker |
| color | string | #00B0FF | The selected date color |
| style | Style | - | Style of the picker container |
| onSelect | func | - | Run after selection of a date |
| onForward | func | - | Run after go forward a day |
| onBack | func | - | Run after go back a day |
| onHidden | func | - | Run after hidden the picker (only ModalDatePicker) |
| isHideOnSelect | boolean | false | Determines whether the modal will be closed (only ModalDatePicker) |
| initialDate | Date | Now | Initial date for picker (only ModalDatePicker) |
| language | JSON 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).