Documentation

• Getting Started
• Usage
• Configuration
• Localization
• Localization Contribution

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

Installation

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"

Usage

Import

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

Fundamental Usage

const now = moment().valueOf();

<TimeDatePicker
  selectedDate={now}
  mode={Modes.date}
  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
    console.log(
      "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();

<TimeDatePicker
  selectedDate={now}
  mode={Modes.time}
  options={{
    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

Fundamentals

Customization (Optionals)

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,
};

Credits

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

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

Author

FreakyCoder, [email protected]

License

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