Documentation

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

Installation

Add the dependency:

npm i react-native-time-date-picker

Peer Dependencies

"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

| Property | Type | Default | Description | | ----------------- | :------: | :--------: | ---------------------------------------------------------------------------------------------------- | | mode | Modes | Modes.date | change the picker's main component (options: Modes.date, Modes.time, Modes.monthYear, Modes.calendar | | currentDate | Date | new Date() | set the current date which initially visible month | | selectedDate | string | undefined | set the selected date which primarly value of date picker | | onSelectedChange | function | default | set your own logic when the date is selected | | onTimeChange | function | default | set your own logic when the time is changed | | onMonthYearChange | function | default | set your own logic when the month year is selected |

Customization (Optionals)

| Property | Type | Default | Description | | ---------------------- | :-------: | :-----: | ---------------------------------------------------------------- | | style | ViewStyle | default | set or override the style object for the main container | | minimumDate | string | default | set the minimum selectable day from user | | maximumDate | string | default | set the maximum selectable day from user | | selectorStartingYear | number | 0 | change the minimum selectable year for year picker | | selectorEndingYear | number | 0 | change the maximum selectable year for year picker | | disableDateChange | boolean | false | disable the month & year from being changed | | onToggleTime | function | default | set your own logic when the header time is toggled | | onToggleMonth | function | default | set your own logic when the header month is toggled | | onTimeCancelPress | function | default | set your own logic when the time select cancel button is pressed | | disableTimeCloseButton | boolean | false | disable 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,
};

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.