React Native datetime picker example – react-native-modal-datetime-picker

Something different today. React, but native. We present react-native-modal-datetime-picker – a nice React Native datetime picker.

React Native datetime picker – cross-platform

A React-Native datetime-picker for Android and iOS – react-native-modal-datetime-picker. A declarative cross-platform react-native datetime-picker.

This library exposes a cross-platform interface for showing the native date-picker and time-picker inside a modal, providing a unified user and developer experience.

Under the hood this library is using react-native-modal for the iOS modal implementation.

React Native datetime picker example
React Native datetime picker example


# using npm
$ npm install react-native-modal-datetime-picker --save

# using yarn
$ yarn add react-native-modal-datetime-picker


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

export default class DateTimePickerTester extends Component {
  constructor(props) {
    this.state = {
      isDateTimePickerVisible: false

  showDateTimePicker = () => {
    this.setState({ isDateTimePickerVisible: true });

  hideDateTimePicker = () => {
    this.setState({ isDateTimePickerVisible: false });

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

  render() {
    return (
        <Button title="Show Picker" onPress={this.showDateTimePicker} />

License: MIT



See also

Mobile friendly datepicker with React JS

React Dual Listbox solution

Date picker for React JS – react-day-picker

How to go full screen in JavaScript, jQuery, Vue or React?

JavaScript range slider – noUiSlider. Modern and responsive!

Detect mobile in JavaScript – Vue.js example

Responsive HTML tables on all devices with jQuery table-shrinker

Mapify – image maps for html projects!