react-native-material-date-picker

KO | EN

gitlite — search

#hacktoberfest #typescript #llm #go #rust #deep-learning #linux #docker #java #windows #cli #kubernetes #awesome-list #vue

react-native-material-date-picker

(★ 20)

Material date picker component on react-native.

react-native-material-date-picker Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Native Material Date Picker

## :star2: Features
- Easy usage
- Material design
- Easy localizable

## :star: ScreenShot

![](https://raw.githubusercontent.com/ilkerkesici/react-native-material-date-picker/master/assets/intro/ss1.gif)

## :arrow_down: Installation

#### Install by npm or yarn

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

yarn add react-native-material-date-picker
```

#### Usage

```sh
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

| 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 (<a href="https://github.com/ilkerkesici/react-native-material-date-picker/blob/master/locales/tr.json">Example</a>) |

## :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`).

react-native-material-date-picker

react-native-material-date-picker Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-native-material-date-picker

react-native-material-date-picker Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README