Using DateTime picker in React Native — an example

  1. React hooks - inside DatePicker component
  2. Call backs — For getting the selected date from DatePicker to App

Prerequisite

Getting Started

import React, { useState } from "react";
import { View, Button } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

const DatePicker = ({ selectedDateCallback }) => {
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

const showDatePicker = () => {
setDatePickerVisibility(true);
};

const hideDatePicker = () => {
setDatePickerVisibility(false);
};

const handleConfirm = (date) => {
console.log("A date has been picked: ", date);
hideDatePicker();

//send back to parent component
selectedDateCallback(date);
};

return (
<View>
<Button onPress={showDatePicker} title="Show Date Picker "></Button>
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="date"
onConfirm={handleConfirm}
onCancel={hideDatePicker}
/>
</View>
);
};

export default DatePicker;
const [aDate, setDate] = useState(new Date());

dateCallback = (selectedDate) => {
const currentDate = selectedDate || aDate;
this.state.date = currentDate ;
console.log("Selected date => " + currentDate)
}

--

--

--

Hi there, I’m Sravan. I am an influential and diligent professional with rich experience in Development.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

//platform.twitter.com/widgets.js from Twitter https://twitter.com/iconbuildgroup

Authentication with supabase in Nextjs

React Native Testing Options Overview

React state and async operations: how to avoid mistakes!

Everyday Scripting

Testing a Javascript function that writes to the DOM

GSoC PMA: Week-7

What is the MERN Stack?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sravan

Sravan

Hi there, I’m Sravan. I am an influential and diligent professional with rich experience in Development.

More from Medium

Integrating Your New and Legacy React Applications with Asgardeo

[React] Making a chat application — Part 2

React Auth with High Order Component

3 good practices when creating components for web/mobile apps.