React Native Time Date Picker: A Handy Picker Component


React Native Time Date Picker

React Native Time Date Picker

React Native Time Date Picker

React Native Time Date Picker


#Announcement Huge Version 2 is under development 🌟 More to come!


Add the dependency:

npm i react-native-time-date-picker

Peer Dependencies

IMPORTANT! You need install them

"moment": ">= 2.29.4",
"@freakycoder/react-native-bounceable": ">= 1.0.3"



import { TimeDatePicker, Modes } from "react-native-time-date-picker";

Fundamental Usage

const now = moment().valueOf();

  onMonthYearChange={(month: number) => {
    console.log("month: ", month); // 1643366100000
    console.log("month formatted: ", moment(month).format("MM")); // 04
    console.log("month formatted: ", moment(month).format("MMM")); // Apr
    console.log("month formatted: ", moment(month).format("MMMM")); // April
  onSelectedChange={(selected: number) => {
    console.log("selected Date: ", selected); // 1649846100000
      "selected date formatted: ",
      moment(selected).format("YYYY/MM/DD HH:mm"),
    ); // 2022/04/13 13:35
  onTimeChange={(time: number) => {
    console.log("time: ", time); // 1643331840000
    console.log("time formatted: ", moment(time).format("HH:mm")); // 04:04

Customization Example Usage

const now = moment().valueOf();

    daysStyle: {
      borderRadius: 16,
      borderWidth: 0.5,
      borderColor: "#f1f1f1",
    is24Hour: false,
  onMonthYearChange={(month) => {
    console.log("month: ", month);
  onSelectedChange={(selected) => {
    console.log("selected: ", selected);
  onTimeChange={(time) => {
    console.log("time: ", time);

Example Project 😍

You can checkout the example project 🥰

Simply run

  • npm i
  • react-native run-ios/android

should work of the example project.

Configuration - Props


modeModesModes.datechange the picker's main component (options:, Modes.time, Modes.monthYear, Modes.calendar
currentDateDatenew Date()set the current date which initially visible month
selectedDatestringundefinedset the selected date which primarly value of date picker
onSelectedChangefunctiondefaultset your own logic when the date is selected
onTimeChangefunctiondefaultset your own logic when the time is changed
onMonthYearChangefunctiondefaultset your own logic when the month year is selected

Customization (Optionals)

styleViewStyledefaultset or override the style object for the main container
minimumDatestringdefaultset the minimum selectable day from user
maximumDatestringdefaultset the maximum selectable day from user
selectorStartingYearnumber0change the minimum selectable year for year picker
selectorEndingYearnumber0change the maximum selectable year for year picker
disableDateChangebooleanfalsedisable the month & year from being changed
onToggleTimefunctiondefaultset your own logic when the header time is toggled
onToggleMonthfunctiondefaultset your own logic when the header month is toggled
onTimeCancelPressfunctiondefaultset your own logic when the time select cancel button is pressed
disableTimeCloseButtonbooleanfalsedisable the time close button if you do not need it

Customization for Options Prop

const defaultOptions: IOptions = {
  backgroundColor: "#fff",
  textHeaderColor: "#241523",
  textDefaultColor: "#432d50",
  selectedTextColor: "#fff",
  mainColor: "#aa7ff9",
  textSecondaryColor: "#967aa5",
  borderColor: "rgba(53, 33, 52, 0.1)",
  defaultFont: "System",
  headerFont: "System",
  textFontSize: 15,
  textHeaderFontSize: 17,
  headerAnimationDistance: 100,
  daysAnimationDistance: 200,
  daysStyle: {},
  is24Hour: true,


Heavily inspired by react-native-modern-datepicker

Re-written whole structure with Typescript and enhanced with lots of ways with better coding, types and localization

Future Plans

  •  Better integration with date timestamp (number) based
  •  Better Documentation
  •  Website
  •  Write an article about the lib on Medium




React Native Time Date Picker is available under the MIT license. See the LICENSE file for more info.

Download details:

Author: WrathChaos

License: MIT license

#reactnative #react 

React Native Time Date Picker: A Handy Picker Component
1.10 GEEK