Introduction:
A date picker, calendar picker, or time picker is a feature that users need on a daily basis. Isn’t it? They can select a date range on their calendar and schedule their important events. React Native being a well-known app development framework can be used to add date picker features to your app. Eager to learn the process? stay hooked to this article till the end. You will also get the code snippets which can make the task much easier.
So, let's start with discussing the prerequisites followed by developers of React Native app development company.
Set up the React Native environment
You need to set the environment for the framework you are working on. Here, we are using the React Native framework but first, you need to decide which target OS and Development OS you want to prefer. This will vary the setup process.
For the current context, we will be considering Windows and Android platforms. So, the setup process has to be conducted accordingly.
To develop a React Native project based on the chosen Development OS and Target OS, you have to download and install Android Studio, JDK, VS Code editor, Node and React Native CLI.
Note that, if you have already built a project on this framework, you don't need to repeat this step as the environment for React Native is already set up in your environment.
A simple template for the date picker feature
Starting off with any React Native project you need to build a template to which you can add your codebase. So, this is not a one-time task. This is a simple process. All you need to do is run a command in a terminal. Consider the below-given guidelines to build a simple template for your project.
- Choose a folder in your local system or you can create one.
- Open the command prompt from this folder and run
npx react-native init CalendarPicker --version 0.68.1. - Press the enter key and your template
CalendarPickerwill be created in your local drive.
You will notice all the fundamental folders are already created in this template. You can customize the template as per your project needs.
Installing react-native-calendar-picker
For the ‘Date Picker’ feature, you have to install a third-party library. Here, it is react-native-calendar-picker. Isn’t it quite interesting that you don't need to code for a component and can easily take and fix your project codebase using the import statement? This is the efficiency of the React Native framework. Apart from making the codebase simple, it allows users to customize their projects.
To install this library, you need to pass a command: npm install --save react-native-calendar-picker. You have to run this command in your template terminal.
Also, you can use props and definite values to customize the components and give a unique interface to your app.
Code snippets for the project
Here, comes the section to present the actual code snippet. Let us begin.
You have to add the given code snippets in your App.js file. For this, open the code editor and go to the App.js file.
import {Stylesheet, Text, View } from 'react-native'
import React, {usestate} from 'react'
import CalendarPicker from 'react-native-calendar-picker'
First, you have to introduce the components that you will work on.
For the current context, it is StyleSheet, View, and Text from the react-native library; React and useState from the react library and CalendarPicker from the react-native-calendar-picker library.
The main component that you have to focus on is CalendarPicker. Using this component as a function along with other event handler functions and props, you will be able to create the entire interface of a date picker.
const App() => {
const [selectedStartDate, setSelectedStartDate]-useState(null) const [selectedEndDate, setSelectedEndDate]-useState(null)
const minDate = new Date();
const maxDate = new Date(2035,12,3);
.....
}
Now, the code uses the useState hook. It specifies the minimum date and the maximum date using the minDate and maxDate.
However, it defines the App component under which all the objects, props, elements, and arguments will be added.
useState is a hook used in the React Native framework. It is considered for state management. For example, if you use a state variable in your program, useState will allow you to set the starting value along with tracking the state of the considered state variable.
Here, the code considers two state variables namely selectedStartDate and selectedEndDate. The initial value of both the state variables is null.
The maxDate is 3rd December 2035 and minDate is the current date.
You can change the value in the minDate & maxDate as per your preference.
const onDateChange=(date,type)=>{
if(type==="END_DATE'){
setselectedEndDate(date)
}
else{
setSelectedStartDate(date) setSelectedEndDate(null)
}
}
The code first checks to see if the type of change is END_DATE.
If it is, the code sets the selected end date to the date value and removes it from the selection.
Otherwise, if it's not an END_DATE, then setSelectedStartDate(date) will be called with a null value for the selected end date.
if/else statement is used in Javascript and it is of utmost significance.
You can use this method to apply conditions and add value based on the conditions met.
return (
<View style={styles.container}>
<CalendarPicker
startFromMonday={true}
allowRangeSelection={true}
minDate={minDate}
maxDate={maxDate}
todayBackgroundColor="#f2e6ff"
selectedDayColor="#7300e6"
selectedDayTextColor="#FFFFFF"
onDateChange={onDateChange}
/>
Now the main part of the customization starts. The code uses the CalendarPicker as a function and a different pair of property-value is used to render it a distinct look.
These are startFromMonday, allowRangeSelection, minDate, maxDate, todayBackgroundColor, selectedDayColor, and selectedDayColor. Also, the onDateChange function is used to call the event handler onDateChange.
<View>
<Text>SELECTED START DATE:{selectedStartDate?selectedStartDate.toString():'
<Text>SELECTED END DATE: {selectedEndDate?selectedEndDate.toString():'' }</Text>
</View>
Two text elements are wrapped with the View tag. Two texts that will be rendered on the screen are SELECTED START DATE and SELECTED END DATE.
Conditional operators are used to checking if any value is assigned to the selectedStartDte and selectedEndDate variables. Depending on this the value of the string will be given.
export default App
const styles = Stylesheet.create({})
It is the last segment of your codebase. It exports the App and then in the next line uses the StyleSheet object in React Native.
To run the program on the emulator
After framing the codebase, check on a device to see whether it is running correctly or not.
To do this, create a terminal from your project and run npm install. This will get you all the dependencies. Then, run npx react-native run-android on the same terminal. Both the command will activate the emulator and the app with the date picker feature will display on the emulator.
Refer to the project output.
You can select any date range in the given calendar. Also, you can customize its color, font-size and add different months to this calendar.
Conclusion:
In conclusion, this article provided a comprehensive guide on adding a date picker feature to a React Native app. It covered the necessary prerequisites for React Native app development, including setting up the development environment. The article then walked through the process of creating a template for the project and installing the react-native-calendar-picker library.
Moreover, the article presented code snippets that demonstrated how to implement the date picker functionality using the CalendarPicker component. It explained the usage of state variables, event handlers, and props to customize the date picker interface.
By following the step-by-step instructions provided in this article, developers can easily integrate a date picker feature into their React Native apps. The flexibility and efficiency of React Native, combined with the react-native-calendar-picker library, enable developers to create a user-friendly and customizable date picker experience.
Comments (0)