rnt
react-native-time-date-picker
npm i react-native-time-date-picker
rnt

react-native-time-date-picker

πŸš€ Easy to use time and date picker with lots of options for React Native πŸ₯³

by FreakyCoder

1.2.0 (see all)License:MITTypeScript:Built-In
npm i react-native-time-date-picker
Readme
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

PropertyTypeDefaultDescription
modeModesModes.datechange the picker's main component (options: Modes.date, 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)

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

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

  • LICENSE
  • 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.

No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate