Skip to content

React Native Date Picker - A new datepicker for Android and iOS!

License

Notifications You must be signed in to change notification settings

ismaelmcosta/react-native-date-picker

 
 

Repository files navigation

React Native Date Picker npm Build status npm

This is a React Native Date Picker with following main features:

📱 Supporting iOS and Android
🕑 3 different modes: Time, Date, DateTime
🌍 Multiple languages
🎨 Customizable

iOS Android
React Native Date Picker React Native Date Picker Android
A slightly improved DatePickerIOS. A custom made native component.

Installation

  1. npm install react-native-date-picker --save    or    yarn add react-native-date-picker
  2. react-native link react-native-date-picker

Minimal Example

import React, { Component } from 'react';
import DatePicker from 'react-native-date-picker';

export default class App extends Component {

  state = { date: new Date() }

  render = () =>
    <DatePicker
      date={this.state.date}
      onDateChange={date => this.setState({ date })}
    />

}

Properties

Prop Description Screenshots iOS Screenshot Android
date The currently selected date.
onDateChange Date change handler
fadeToColor Android picker is fading towords this background color. {color, 'none',}
maximumDate Maximum selectable date.
minimumDate Minimum selectable date
minuteInterval The interval at which minutes can be selected. Date picker minute interval IOS Date picker minute interval Android
mode The date picker mode. {'datetime', 'date', 'time'} Datepicker datetime mode iosdate mode iostime mode ios react native datetime mode androiddate mode androidtime mode android
locale The locale for the date picker. Changes language, date order and am/pm preferences. Value needs to be a Locale ID. React Native Date picker locale language ios React Native Date picker locale language android
textColor Changes the text color. react native datepicker text color background color ios Text color background color android
timeZoneOffsetInMinutes Timezone offset in minutes (default: device's timezone)

About

📅   React Native Date Picker is a cross platform component working on both iOS and Android. It uses the slightly improved DatePickerIOS on iOS and a custom picker on Android which has similar look and feel. The datetime mode might be particulary interesting if you looking for a way to avoid two different popup pickers on android.

FAQ

How do i change the date order? (To YYYY-MM-DD etc)

The order is determined by the locale prop. Set for instance locale='fr'to get the France preference.

How do i change the 12/24h or AM/PM format?

On iOS the 12/24h preference is determined by the locale prop. Set for instance locale='fr'to get the France preference. On Android the 12/24h format is determined by the device setting. When using 12h mode the AM/PM part of the picker will be displayed.

Roadmap

  • Mode: datetime
  • Mode: date
  • Mode: time
  • Locale support. (AM/PM, 12h/24h toggled and strings translated)
  • Replace todays date with the string "Today" (considering locale)
  • Animate to date when state change occur.
  • Switch between AM/PM when scrolling between forenoon and afternoon.
  • Support maximumDate/minimumDate.
  • Minute interval prop.
  • Colored background support.
  • Colored text support.

Why another React Native date picker?

One of the strongest reason to use react native is its cross platform compatibility. Most of the official components are working seemlessly on both platforms but there are some with single platform support only. The react native datepicker is one example where both DatePickerIOS and DatePickerAndroid are present. The reason for this is that the default date picker is implemented in seperate ways, iOS normally have an integrated view picker wheel where android has different pickers in a dialog format.

If you want to use these pickers you can combile the official ones or a third party module that already done that for you. If you on the other hand want have a more unified design between your android and ios app, this module is for you. The datetime mode can be particular helpful to avoid 2 separate picker dialogs on android.

About

React Native Date Picker - A new datepicker for Android and iOS!

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 49.0%
  • JavaScript 31.2%
  • Objective-C 14.6%
  • Python 3.8%
  • Ruby 1.4%