Introduction to React to Native DatePicker

The following article provides an outline for React Native Datepicker. A DatePicker is used to display a choice in the form of calendar provided to users, from where one can choose the desired date or time according to their need. This choice of choosing the date is also connected through the text box, which displays the chosen date and time, which also helps in easing the choice to choose. For different libraries, one can choose different CDN links. React Native Community provides the choice of both DatePicker and TimePicker to developers for both Android and iOS. In the article below, we have implemented different DatePicker using different React Native Libraries.

Syntax of React Native DatePicker:

1. Syntax of using basic DatePicker.

2. Syntax of using range DatePicker.

3. Syntax of using DatePicker with TimePicker.

includeTime
showToday
onChange={onChange("DatePicker include time")}
/>

Working of React Native DatePicker

There are three picker modes which are defined below:

• Datetime Mode: This mode provides a date time picker by react native which has the option of choosing date and time simultaneously. The present-day will be displayed as ‘Today”.
• DatePicker Mode: This mode provides a datepicker by react native, which has the option of choosing the year, month, and date. The order of the date-month-year is adjusted according to respective locale.
• TimePicker Mode: This mode is used if only time is needed to be displayed. The AM/PM is added according to the locale and the user settings. Time intervals can be added for displaying the time at an instance of equal time intervals.

Examples of React Native DatePicker

Given below are the examples mentioned:

Example #1

Basic React Native DatePicker.

In the example below, the basic date picker has been displayed. One can choose the date either directly through the calendar or by entering the preferred date in the box.

The files used to implement the codes below are:

a. index.js

import React from "react";
import ReactDOM from "react-dom";
import { DatePicker
, RangeDatePicker } from "@y0c/react-datepicker";
import "@y0c/react-datepicker/assets/styles/calendar.scss";
import "dayjs/locale/ko";
import "dayjs/locale/en";
import "./styles.css";
const Panel = ({ header, children }) => (


);
function App() {
const onChange = title => (...args) => console.log(title, args);
return (

{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}

);
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

b. styles.css

.App {
font-family: 'Times New Roman'
, Times
, serif;
}

Output:

Example #2

Range Date Picker.

In the example below, one can choose the date from the range of dates displayed in the calendar.

The files used to implement the code below are:

a. index.js

import React from "react";
import ReactDOM from "react-dom";
import { DatePicker
, RangeDatePicker } from "@y0c/react-datepicker";
import "@y0c/react-datepicker/assets/styles/calendar.scss";
import "dayjs/locale/ko";
import "dayjs/locale/en";
import "./styles.css";
const Panel = ({ header, children }) => (


);
function App() {
const onChange = title => (...args) => console.log(title, args);
return (

{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}{'\u2740'}

);
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

b. styles.css

.App {
font-family: 'Times New Roman'
, Times
, serif;
}

Output:

Example #3

DatePicker with TimePicker.

Type 1:

In the example below, one can pick the date from the Date menu on the top and time from the Time menu. Or directly can enter the desired date and time in the box.

The files used to implement the code below are:

a. index.js

import React from "react";
import ReactDOM from "react-dom";
import { DatePicker
, RangeDatePicker } from "@y0c/react-datepicker";
import "@y0c/react-datepicker/assets/styles/calendar.scss";
import "dayjs/locale/ko";
import "dayjs/locale/en";
import "./styles.css";
const Panel = ({ header, children }) => (


);
function App() {
const onChange = title => (...args) => console.log(title, args);
return (

includeTime
showToday
onChange={onChange("DatePicker include time")}
/>

);
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

b. styles.css

.App {
font-family: 'Times New Roman'
, Times
, serif;
}

Output:

Type 2:

In the example below, one can choose between the date and time simultaneously.

The files used to implement the code below are:

a. index.js

import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import moment from "moment";
import "react-datepicker/dist/react-datepicker.css";
import "./styles.css";
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: moment("2020-08-20"),
endDate: moment("2020-08-24")
};
}
handleChange = (
{
startDate
, endDate
}
) => {
startDate = startDate || this.state.startDate;
endDate = endDate || this.state.endDate;
if (startDate.isAfter(endDate)) {
endDate = startDate;
}
this.setState({ startDate, endDate });
};
handleChangeStart =
startDate => this.handleChange(
{
startDate
}
);
handleChangeEnd =
endDate => this.handleChange(
{
endDate
}
);
render() {
return (



);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

b. styles.css

.react-datepicker__time-list {
padding: 0 !important;
}

Output:

Example #4

With CANCEL and OK buttons.

In the example below, we have developed a Date picker from where one can choose the desired date and it also have CANCEL button to cancel the action taken by user and an OK button to approve the action taken by the user.

The files used to implement the code below are:

a. App.js

import React
, { Component } from 'react';
import { View
, StyleSheet } from 'react-native';
import DatePicker from 'react-native-datepicker';
export default class MyDatePicker extends Component {
constructor(props) {
super(props);
this.state = { date: '20-08-2020' };
}
render() {
return (

style={{ width: 200 }}
date={this.state.date}
mode="date"
placeholder="select date"
format="DD-MM-YYYY"
minDate="01-01-2020"
maxDate="01-01-2030"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateIcon: {
position: 'absolute',
left: 0,
top: 3,
marginLeft: 0.2,
},
dateInput: {
marginLeft: 30,
},
}}
onDateChange={date => {
this.setState({ date: date });
}}
/>

);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
marginTop: 40,
padding: 12,
backgroundColor: '#f79eff',
},
});

Output:

Recommended Articles

This is a guide to React Native DatePicker. Here we discuss the introduction, working of react native DatePicker along with examples respectively. You may also have a look at the following articles to learn more

1. Styling in React Native
2. React Native Orientation
3. React Native Redux
4. React Native Template

The post React Native DatePicker appeared first on EDUCBA.