# react-native-modal-datetime-picker [![npm version](https://badge.fury.io/js/react-native-modal-datetime-picker.svg)](https://badge.fury.io/js/react-native-modal-datetime-picker) ![Supports Android and iOS](https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg) 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`](https://github.com/react-native-community/react-native-datetimepicker). ## Setup (for non-Expo projects) If your project is not using [Expo](https://expo.io/), install the library and the community date/time picker using npm or yarn: ```bash # 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**](https://github.com/react-native-community/react-native-datetimepicker#getting-started). ## Setup (for Expo projects) If your project is using [Expo](https://expo.io/), install the library and the community date/time picker using the [Expo CLI](https://docs.expo.io/versions/latest/workflow/expo-cli/): ```bash 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: ```json { "expo": { "userInterfaceStyle": "automatic" } } ``` Refer to the [Appearance](https://docs.expo.io/versions/latest/sdk/appearance/) documentation on [Expo](https://expo.io/) for more info. ## Usage ```javascript 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 (

패키지	다운로드	Stars	크기	Issues	발행일	라이선스

react-native-modal-datetime-picker	375,303	3,006	43.9 kB	44	6ヶ月前	MIT