react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS

Overview

react-native-datepicker Build Status Coverage Status Monthly download Total downloads

React Native DatePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS

Install

npm install react-native-datepicker --save

Or using react-native-ui-xg, our react-naitve ui kit.

npm install react-native-ui-xg --save

Example

Check index.android.js in the Example.

android ios

Usage

import React, { Component } from 'react'
import DatePicker from 'react-native-datepicker'

export default class MyDatePicker extends Component {
  constructor(props){
    super(props)
    this.state = {date:"2016-05-15"}
  }

  render(){
    return (
      <DatePicker
        style={{width: 200}}
        date={this.state.date}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate="2016-05-01"
        maxDate="2016-06-01"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 0,
            top: 4,
            marginLeft: 0
          },
          dateInput: {
            marginLeft: 36
          }
          // ... You can check the source to find the other keys.
        }}
        onDateChange={(date) => {this.setState({date: date})}}
      />
    )
  }
}

You can check index.js in the Example for detail.

Properties

Prop Default Type Description
style - object Specify the style of the DatePicker, eg. width, height...
date - string | date | Moment instance Specify the display date of DatePicker. string type value must match the specified format
mode 'date' enum The enum of date, datetime and time
androidMode 'default' enum The enum of default, calendar and spinner (only Android)
format 'YYYY-MM-DD' string Specify the display format of the date, which using moment.js. The default value change according to the mode.
confirmBtnText '确定' string Specify the text of confirm btn in ios.
cancelBtnText '取消' string Specify the text of cancel btn in ios.
iconSource - {uri: string} | number Specify the icon. Same as the source of Image, always using require()
minDate - string | date Restricts the range of possible date values.
maxDate - string | date Restricts the range of possible date values.
duration 300 number Specify the animation duration of datepicker.
customStyles - object The hook of customize datepicker style, same as the native style. dateTouchBody, dateInput...
showIcon true boolean Controller whether or not show the icon
hideText false boolean Controller whether or not show the dateText
iconComponent - element Set the custom icon
disabled false boolean Controller whether or not disable the picker
is24Hour - boolean Set the TimePicker is24Hour flag. The default value depend on format. Only work in Android
allowFontScaling true boolean Set to false to disable font scaling for every text component
placeholder '' string The placeholder show when this.props.date is falsy
onDateChange - function This is called when the user confirm the picked date or time in the UI. The first and only argument is a date or time string representing the new date and time formatted by moment.js with the given format property.
onOpenModal - function This is called when the DatePicker Modal open.
onCloseModal - function This is called when the DatePicker Modal close
onPressMask - function This is called when clicking the ios modal mask
modalOnResponderTerminationRequest - function Set the callback for React Native's Gesture Responder System's call to onResponderTerminationRequest. By default this will reject a termination request, but can be overidden in case the View under the Modal is implementing custom gesture responders, and you wish for those to be overidden in certain cases.
TouchableComponent TouchableHighlight Component Replace the TouchableHighlight with a custom Component. For example : TouchableOpacity
getDateStr - Function A function to override how to format the date into a String for display, receives a Date instance

Property customStyles available keys

  • appearance: dateInput, disabled, dateTouchBody, dateIcon, placeholderText, dateText
  • ios select panel: datePickerCon, datePicker, btnConfirm, btnTextConfirm, btnCancel, btnTextCancel

Instance Methods

Method Params Description
onPressDate - Manually open the date picker panel
onPressCancel - Manually close the date picker panel like, similarly pressing cancel btn
Comments
  • Datepicker in IOS is not working in dark mode

    Datepicker in IOS is not working in dark mode

    Issue

    I am using react-native-picker , on android its working fine but on IOS ( iphone XS ,iphone XS max, iphone 11, iphone 11 pro , iphone 11 pro max) is not showing the calendar properly in the below image , in datepicker date is not showing and sometime month scroll is also not working.

    I also used react-native DatepickerIOS it's showing same behavior like the attached image

    daepicker

    Code

                            <DatePicker
                                style={{ height: 30, marginTop: -10 }}
                                date={this.state.noteData.date ? this.state.noteData.date : new Date()}
                                mode="date"
                                format="YYYY-MM-DD"
                                confirmBtnText="Confirm"
                                cancelBtnText="Cancel"
                                maxDate={new Date()}
                                customStyles={{
                                    dateInput: {
                                        borderColor: 'transparent',
                                        backgroundColor: 'transparent',
                                        height: 20,
                                        alignItems: 'flex-start',
                                        paddingLeft: 7
                                    },
                                    dateText: styles.inputBox,
                                    placeholderText: styles.inputBox
                                }}
                                showIcon={false}
                                onDateChange={(date) => this.handleChange(date, 'date')}
                            />
    

    Environment

    1. react: 16.8.3
    2. react-native: 0.59.8
    3. react-native-datepicker: 1.7.2
    4. target platform: IOS
    5. operating system: ubunto

    If someone faced this issue kindly help how can I fixed this , this is happening only iphone series after iphone X like I mentioned above

    opened by Mohammad-Khalid23 22
  • How to open calendar componet by click on a text

    How to open calendar componet by click on a text

    <Text onPress={_pressHere} >
    Select date
    </Text>
    
    var _onPress = () => {
            return (
                <MyDatePicker/>
            )
        };
    
    opened by nimabk82 15
  • Add modalOnResponderTerminationRequest property

    Add modalOnResponderTerminationRequest property

    Was having issues where a custom Gesture Responder on one of my views was being triggered when scrolling up and down on the iOS Date Picker Modal. Added this property to override onResponderTerminationRequest callback on the Date Picker Modal.

    By default the behaviour will be the same as before.

    opened by jdoyle65 13
  • add placeholder when this.props.date is missing

    add placeholder when this.props.date is missing

    Hi, I added a placeholder prop to show in case you don't want to supply a default date and want a friendly message to show to user. I also think we might want to have different styles for the placeholder and date. what do you think?

    opened by atlanteh 12
  • Add locale support

    Add locale support

    Allow DatePicker to receive locale as props.

    The locale is used in the getDateStr method, so that the date text is displayed according to the locale.

    Example of usage:

    <DatePicker
        date="2016-06-01"
        format="ddd, DDDD MMM YYYY"
        locale="pt-br" />
    

    Related issues:

    • #71
    • #91
    opened by danielbucher 10
  • Improve entry and exit of modal

    Improve entry and exit of modal

    I thought that the entry of the modal is fine but the backdrop abruptly appears. The exit of the modal and backdrop both abruptly disappear.

    Let me know what you think.

    opened by superandrew213 9
  • 有两个警告&弹出的datepicker如何把月份换成数字形式,还有事1980 08 09这样实现

    有两个警告&弹出的datepicker如何把月份换成数字形式,还有事1980 08 09这样实现

    Warning: Failed propType: Invalid prop `date` of type `Number` supplied to `RCTDatePicker`, expected instance of `Date`. Check the render method of `DatePickerIOS`.
    Warning: Failed propType: Required prop `onDateChange` was not specified in `RCTDatePicker`. Check the render method of `DatePickerIOS`.
    

    弹出的datepicker如何把月份换成数字形式,还有事1980 08 09这样实现

    opened by 85636682 7
  • How does' locale= 'zh-cn' take effect on android devices

    How does' locale= 'zh-cn' take effect on android devices

    Issue

    I set 'locale=' zh-cn 'but it doesn't work on android devices. Is there any way?

    Expected Behavior

    Code

    <DatePicker
                    style={styles.DatePicker}
                    date={this.state.QuotedTimeByStart}
                    mode="date"
                    placeholder="起始时间"
                    format="YYYY-MM-DD"
                    locale="zh-cn"
                    confirmBtnText="确定"
                    cancelBtnText="取消"
                    showIcon={false}
                    androidMode="spinner"
                    onDateChange={(date) => {this.setState({QuotedTimeByStart: date})}}
                />
    

    Environment

    1. react-native -v: 0.57.2
    2. node -v: 8.11.1
    3. npm -v:6.4.1
    4. yarn --version:1.12.1
    5. target platform: Android | iOS
    6. operating system:
    opened by vitozyf 6
  • DatePicker on Samsung S6 show calendar instead of spinner

    DatePicker on Samsung S6 show calendar instead of spinner

    Issue

    The code specifies androidMode="spinner" and works on many android devices. Samsung S6 however still shows calendar instead of spinner

    Expected Behavior

    Show spinner view instead of calendar

    Code

    import React from 'react'
    import PropTypes from 'prop-types'
    import moment from 'moment'
    import ReactNativeDatePicker from 'react-native-datepicker'
    import contentful from '../../../../api/contentful'
    import { Value } from '../Feature.styles'
    import { styles } from './DatePicker.styles'
    import { dateFromString } from '../../../../utils/timestamp'
    
    const FORMAT = 'MMMM DD YYYY'
    
    const MAX_DATE = moment()
        .subtract(18, 'years')
        .toDate()
    const MIN_DATE = moment()
        .subtract(95, 'years')
        .toDate()
    const DEFAULT = new Date('1/1/1990')
    
    @Value.withComponent
    class DatePicker extends React.PureComponent {
        handleDateChange = (date) => {
            const { onChange } = this.props
            onChange(moment(date, FORMAT))
        }
    
        customStyles = { ...styles, dateText: this.props.style }
    
        render() {
            const { disabled, value } = this.props
            return (
                <ReactNativeDatePicker
                    onDateChange={this.handleDateChange}
                    date={value ? dateFromString(value) : DEFAULT}
                    disabled={disabled}
                    showIcon={false}
                    confirmBtnText={contentful.getField({
                        type: 'appStrings',
                        code: 'common.done',
                    })}
                    cancelBtnText={contentful.getField({
                        type: 'appStrings',
                        code: 'common.cancel',
                    })}
                    format={FORMAT}
                    maxDate={MAX_DATE}
                    minDate={MIN_DATE}
                    customStyles={this.customStyles}
                    androidMode="spinner"
                />
            )
        }
    }
    
    DatePicker.propTypes = {
        onChange: PropTypes.func.isRequired,
        value: PropTypes.any.isRequired,
        disabled: PropTypes.bool,
    }
    
    export default DatePicker
    

    Environment

    1. react-native -v: 0.48.3
    2. node -v: v8.9.1
    3. npm -v: 5.5.1
    4. yarn --version: 0.27.5
    5. target platform: Android
    6. operating system: 6.0.1
    7. target device: samsung S6
    opened by vitquay1996 6
  • One day before

    One day before

    Thank you for your work!

    My Problem: If I have a date for example 1980-10-24 and I open it, I see 23 Oktober 1970, alwas y day before, is this a bug or I am doing something wrong?

    opened by risuiar 5
  • Remove hard coded width

    Remove hard coded width

    Desc

    Sometimes when the placeholder text run long it warps because of the width limitations. This PR is removing the limitations so that the user can have more control over how the placeholder is presented

    opened by ywen 5
  • Update datepicker.js

    Update datepicker.js

    opened by iiitma 0
  • Unable to inspect picker elements of react-native-picker v1.7.2 in Appium inspector for both Android and IOS

    Unable to inspect picker elements of react-native-picker v1.7.2 in Appium inspector for both Android and IOS

    I work on test automation . I am trying to select an expiry date in the date picker component . But I am unable to see the android tags corresponding to the date picker in Appium inspector and UIAutomatorViewer. The app source looks like below

    image

    After the last android.view.ViewGroup tag , nothing is displayed for date picker in inspector.

    As a workaround , we asked the developer to set ids for ‘Cancel’ and ‘Confirm’ buttons . So that atleast we can select first date and proceed . But the developer informed that the date picker is coming from reactive-native-picker library(1.7.2 version) . So they are unable to set any ids inside for the ‘Cancel’ and ‘Confirm’ buttons.

    Please find the xml source which copied from inspector . There is no mention of the date picker element

    image

    Any help is appreciated . Thanks in advance

    opened by ser2022 0
  • datepickerandroid has been removed from react native

    datepickerandroid has been removed from react native

    Issue

    This plugin is no more stable with latest react native 68 version as DatePickerAndroid has been removed from official react-native lib and this plugin is still importing that from lib. Need to update this lib.

    opened by ehtisham-ali-emumba 2
  • minDate did not work in Mozilla

    minDate did not work in Mozilla

    Issue

    The minDate did not work in mozilla

          <DatePicker
             selected={new Date(this.state.selectedStartDate)}
            onChange={this.handleStartDateChange}
            dateFormat="dd-MM-yyyy"
            minDate={new Date("01-01-2010")}
            showDisabledMonthNavigation
             />
    

    Expected Behavior

    This should hide date less than 01-01-2010. In chrome and other browsers it works as expected but failed in mozilla.

    opened by ademilua 1
Releases(v1.7.0)
Owner
X Fruit Team
A group of fruit sellers
X  Fruit Team
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Kalon.Tech 330 Sep 22, 2022
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 346 Jul 30, 2022
A gesture password component for React Native. It supports both iOS and Android since it's written in pure JavaScript.

react-native-gesture-password A gesture password component for React Native (web). It supports both iOS, Android and Web since it's written in pure Ja

null 544 Sep 27, 2022
A React Native component for drawing by touching on both iOS and Android.

react-native-sketch-canvas A React Native component for drawing by touching on both iOS and Android. Features Support iOS and Android Stroke thickness

Terry 615 Sep 21, 2022
react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]

The React-Native-Picker react native Picker component for both Android and iOS based on pure JavaScript. Main For the iOS, using PickerIOS as the basi

X  Fruit Team 78 Aug 3, 2021
🔢 React-Native component to input confirmation code for both Android and IOS

rn-verifcode React-Native component to input confirmation code for both Android and IOS customizable fast paste SMS-code copy from clipboard reset cod

Xavier Carpentier 23 Jul 3, 2022
A react-native dropdown component easy to customize for both iOS and Android.

react-native-element-dropdown react-native-element-dropdown A react-native dropdown component easy to customize for both iOS and Android. Getting star

Hoà Phan 247 Sep 23, 2022
A react-native dropdown/picker/selector component for both Android & iOS.

react-native-modal-dropdown A react-native dropdown/picker/selector component for both Android & iOS. Features Pure JS. Compatible with both iOS and A

Rex Rao 1.2k Sep 23, 2022
The video recorder component that extends from react-native-camera. It works for both iOS & Android.

react-native-beautiful-video-recorder The video recorder component that extends from react-native-camera. It works for both iOS & Android. Features: R

Hau Vo 232 Sep 29, 2022
💃🏻 Display Animated WebP images in React Native the hacky way, support for Android & iOS both

???? react-native-animated-webp Display and control Animated WebP images in React Native the hacky way ?? Installation ?? PeerDependencies first This

Junho Yeo 12 Jul 1, 2022
Animated Submit button. Works on both android and ios.

react-native-submit-button An Animated Submit Button. Works on both android and IOS. folds when in progress expands back when its ready Inspiration ht

Ronak Kothari 124 May 27, 2022
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Devio.org 1.1k Sep 28, 2022
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)

React Native ActionSheet This package will help you to using ActionSheetIOS(IOS) and BottomSheetDialog(Android). Usage of this package same as for IOS

Talut TASGIRAN 26 May 23, 2021
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 414 Aug 29, 2022
iOS and Android native search component for react native

react-native-search-bar iOS native search bar for react native. Installation In your react native project, run npm install react-native-search-bar --s

null 18 Jul 25, 2022
🔽 A Picker component for React Native which emulates the native select> interfaces for iOS and Android

react-native-picker-select A Picker component for React Native which emulates the native <select> interfaces for iOS and Android For iOS, by default w

LawnStarter Organization 1.5k Sep 26, 2022
An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker An awesome and cross-platform React Native date picker and calendar component for iOS and Android. This package is des

chenlong 86 Sep 19, 2022
Native CardView for react-native (All Android version and iOS)

react-native-card-view Native CardView that compatible for iOS and Android( both lollipop and pre-lolipop). Website Material Design Card Spec CardView

Kishan Vaghela 489 Sep 13, 2022
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

Ammar Ahmed 925 Sep 23, 2022