React Native Common DatePicker for Android and iOS Example Tutorial

DatePicker dialog is used to pick date in Android and iOS applications. By default react native has two different DatePicker component 1st one is DatePickerIOS and 2nd is DatePickerAndroid, but it is very difficult to configure two component for single task. So after finding a lot on Internet finally i found an immersive library called as react-native-datepicker-dialog . This library comes with an awesome functionality that using a single code developers can create DatePicker for both android and iOS applications. So let’s get started 🙂 .

Contents in this project React Native Common DatePicker for Android and iOS tutorial :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add react-native-datepicker-dialog library inside your project :

Open Your project in command prompt and execute below command inside your project’s folder.

3. After successfully installed the react-native-datepicker-dialog library we need to install another library known as moment. To install the moment library inside your project execute the below command in project’s folder.

4. Import AppRegistry, StyleSheet, Text, View, TouchableOpacity in your project.

5. Import DatePickerDialog and moment .

6. Create constructor in your main class with props and define two variables DateText and DateHolder using state.

DateText : is used to show date on screen using Text component.

DateHolder : is used to get date from DatePicker dialog.

7. Create a function named as DatePickerMainFunctionCall() . This function would call on Text box onPress event.

8. Create another function named as onDatePickedFunction() with date argument inside it. This function would call after the DatePickerMainFunctionCall(). Using this function we would set the pick date in Text component.

9. Create a Parent View in render’s return block and add Text Component inside it to show the Application name, After that Create a TouchableOpacity component and call the DatePickerMainFunctionCall on the onPress of TouchableOpacity. Now make a View inside the TouchableOpacity and create another Text component inside it, Which would show us the selected date.

10. Create CSS Style sheet for all views.

11. Now call the AppRegistry .

12. Complete source code for index.android.js / index.ios.js file

 

Screenshot in Android device :

Screenshot in iOS device :

DatePicker

15 Comments

  1. Hey dude, very good Tutorials, i was wondering, could you please make one of transitions or animations using react-native animatable please?

  2. When I use this all its make error of
    “undefined is not an object (evaluating ‘_react2.PropTypes.func’)”
    I am attaching the link of screenshots Please Check.
    http://prntscr.com/gvx2j9

  3. How can I select the year in an easier way?
    i need to insert my birthdate

  4. Krissana Leawchavalit

    I have some question about DatePicker. Before I pick the date in the text box is show the text like this “Invalid Date”. I want to remove the text “Invalid Date”. Can you tell me how to remove them in the text box. Thank you.

  5. can we add colour style to datepicker???

  6. Hi, for this topic, i got one situation.
    for example,
    1) i choose ‘3 Oct 2018’ after open the dialog,
    2) then i open the dialog, the value go back to current date.
    may i know that how to solve if based on your sample code ?
    thanks.

  7. Hai Bro,
    I’m facing this, i didn’t clear this error. Help me.

    Using this.refs is deprecated. (react/no-string-refs)
    and Using string literals in ref attributes is deprecated. (react/no-string-refs)

    How to Fix it bor?

  8. How to use placeholder?

  9. Just input your placeholder text to DateText: ”,
    like – DateText: ‘Your Placeholder’,
    That’s all!

Leave a Reply

Your email address will not be published. Required fields are marked *