react-native-time-date-picker
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

React Native Time Date Picker

React Native Time Date Picker

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Time Date Picker

React Native Time Date Picker

React Native Time Date Picker

React Native Time Date Picker

Documentation

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

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, kurayogun@gmail.com

License

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

Package Sidebar

Install

npm i react-native-time-date-picker

Weekly Downloads

74

Version

1.2.0

License

MIT

Unpacked Size

184 kB

Total Files

93

Last publish

Collaborators

  • freakycoder