To help you get started, we've collected the most common ways that react-native-modal-datetime-picker is being used within popular public projects.

subschema / subschema / subschema-native / src / types / Date.jsx View on Github

import moment from "moment";

const {onConfirm, onCancel, ...propTypes} = DatePicker.propTypes;

export default class DateInputType extends PureComponent {
    static displayName = 'Date';

    static propTypes = {
        ...propTypes,
        onChange: PropTypes.valueEvent,
        containerStyle: styleClass,
        mode: PropTypes.oneOf(["date", "datetime", "time"])

    };
    static defaultProps = {
        ...DatePicker.defaultProps,
        mode: 'date',
        setDateText: "Set Date",
        cancelTextIOS: "Cancel",
        confirmTextIOS: "Confirm",
        format: "dddd, MMMM Do YYYY, h:mm:ss a"
    };
    state = {
        visible: false
    };

    valueAsDate(value) {
        if (value == null) {
            this._date = new Date();
        } else if (this.props.value instanceof Date) {
            return this._date = value;
        } else {

View more ways to use react-native-modal-datetime-picker

react-native-modal-datetime-picker

A declarative cross-platform react-native date and time 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-community/datetimepicker.

Setup (for non-Expo projects)

If your project is not using Expo, install the library and the community date/time picker using npm or yarn:

# using npm
$ npm i react-native-modal-datetime-picker @react-native-community/datetimepicker

# using yarn
$ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker

Please notice that the @react-native-community/datetimepicker package is a native module so it might require manual linking.

Setup (for Expo projects)

If your project is using Expo, install the library and the community date/time picker using the Expo CLI:

npx expo install react-native-modal-datetime-picker @react-native-community/datetimepicker

To ensure the picker theme respects the device theme, you should also configure the appearance styles in your app.json this way:

{
  "expo": {
    "userInterfaceStyle": "automatic"
  }
}

Refer to the Appearance documentation on Expo for more info.

Usage

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

const Example = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

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

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

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

  return (