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

DirectCode | February 13, 2020 | Android, Animation, Awesome, CSS, Date, Time and Clock, es6, Forms, Frameworks, HTML5, iOS, React JS, React Native, UI | 2 Comments

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.

Setup

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

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

Sample

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) {
    super(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);
    this.hideDateTimePicker();
  };

  render() {
    return (
      <>
        <Button title="Show Picker" onPress={this.showDateTimePicker} />
        <DateTimePicker
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this.handleDatePicked}
          onCancel={this.hideDateTimePicker}
        />
      </>
    );
  }
}

License: MIT

GitHub
https://github.com/mmazzarolo/react-native-modal-datetime-picker