React native calender

In this article, we will be learning to add calendar features to react native app.

So before creating the calendar, we do need to install a few packages or add some packages. This feature is important. This feature is one of the essential features to learn because we find a date picker in almost every app, the purpose of having a date picker can be different, but after all, it's a date picker. We can create interesting date pickers using some methods and styling. Still, here we will be learning about the basic structure of the calendar, and you can create a lot of attractive date pickers after learning the basic creating method.

Installing required packages

1. npm install react-big-calendar
2. npm install react-date picker
3. npm install date-fnsnpm install --save react-native-calendar

The basic calender object contains date,month,year and timestamp.

let s create one datepicker using react native calender

App.js code:

import React, {useState} from 'react';
import {
  Text,
  SafeAreaView,
  View,
  StyleSheet,
} from 'react-native';
import DatePicker from 'react-native-datepicker';
 const App = () => {
  const [Date, setDate] = useState('09-10-2020');
 
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>
        <Text style={{color:"#aa80ff",fontWeight:'bold',fontSize: 50}}>Tutorial and example </Text>
        <Text style={styles.title}>
          pick your birthday date
        </Text>
        <DatePicker
          style={styles.datePickerStyle}
          date={date}
          mode="date"
          placeholder="select date"
          format="DD-MM-YYYY"
          minDate="01-01-2016"
          maxDate="12-05-2022"
          confirmBtnText="Confirm"
          cancelBtnText="Cancel"
         
        />
      </View>
    </SafeAreaView>
  );
};


 export default App;
 const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'#003326'
  },


  title: {
    textAlign: 'center',
    fontSize: 30,
    fontWeight: 'bold',
    padding: 20,
    marginTop: 200,
    color:'#80ff80'
  },


  datePickerStyle: {
    width: 200,
    marginTop: 100,
    backgroundColor:'#80ff80',
    borderColor : 'white',
    borderWidth: 20
  },


});

Output:

Explanation: let's understand some important parts of the code above.

Import DatePicker from 'react-native-date picker;

Through this, we have imported the DatePicker from the react-native-datepicker package.

 const [date, setDate] = useState('09-10-2020');

Here we have used usestate for the date, and setdate will be used to alter the date. We are using useState because it's not fixed. It is supposed to change as per the user's requirement.

<DatePicker
          style={styles.datePickerStyle}
          date={Date}
          mode="date"
          placeholder="select date"
          format="DD-MM-YYYY"
          minDate="01-01-2016"
          maxDate="12-05-2022"
          confirmBtnText="Confirm"
          cancelBtnText="Cancel"
         
        />

The format represents the how Date will be represented. Here date is initialized by Date ( where useState is used). We have already discussed placeholder previously. Whatever text is written in placeHolder will be visible to the user for their convenience, so they know what they actually have to fill on that blank part. minDate is the minimum date that this date picker can pick. The date before the min date cannot be picked. The same goes for maxDate. We cannot pick a date greater than the maxDate. confirmBtnText is for confirming the Date and cancel is for not making any change means you do not want to pick the Date, so you choose to cancel instead of picking.

The rest is the styling part and some text component which is easy to understand. If you are having any problem styling or in any component, kindly check that component's tutorial or styling tutorial part. It would definitely be helpful for you.

I hope you have learned about the react-native calender.