๐Ÿš€ Easy to use time and date picker with lots of options for React Native ๐Ÿฅณ

Overview

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
= 2.29.4", "@freakycoder/react-native-bounceable": ">= 1.0.3"">
"moment": ">= 2.29.4",
"@freakycoder/react-native-bounceable": ">= 1.0.3"

Usage

Import

import TimeDatePicker from "react-native-time-date-picker";

Fundamental Usage

{ console.log("selected: ", selected); }} onTimeChange={(time) => { console.log("time: ", time); }} />">
<TimeDatePicker
  selectedDate={now}
  onMonthYearChange={(month) => {
    console.log("month: ", month);
  }}
  onSelectedChange={(selected) => {
    console.log("selected: ", selected);
  }}
  onTimeChange={(time) => {
    console.log("time: ", time);
  }}
/>

Customization Example Usage

{ console.log("month: ", month); }} onSelectedChange={(selected) => { console.log("selected: ", selected); }} onTimeChange={(time) => { console.log("time: ", time); }} />">
<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

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, [email protected]

License

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

You might also like...
๐Ÿ”” Customizable modal components with โœ”๏ธcheck options in React Native
๐Ÿ”” Customizable modal components with โœ”๏ธcheck options in React Native

NOTICE This package was created just when I started react-native. And I thought I had to fix a lot of this package, and I decided to put a new named m

โ˜๏ธ React Native Select List Equivalent to Html's  Select with options
โ˜๏ธ React Native Select List Equivalent to Html's Select with options

๐Ÿšฉ React Native Select List โ˜๏ธ React Native Select List Equivalent to Html's Select with options --" React Native Dropdown Select List Demo. Light wei

react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]
react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]

The React-Native-Picker react native Picker component for both Android and iOS based on pure JavaScript. Main For the iOS, using PickerIOS as the basi

A native and easy to use toast plugin for react-native
A native and easy to use toast plugin for react-native

react-native-toast-native React Native Toast is a toast component for both Android and iOS. it uses scalessec/Toast for iOS; Demo: Getting started $ n

An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API
An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API

react-native-gif-search An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using

A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

A react emoji picker for use with emojione
A react emoji picker for use with emojione

Emoji Picker A friendly Emoji picker for Emojione written as a React component. It looks a little something like this, but is easily customized: Insta

A theme friendly, easy to use react-native toast component built using styled-components and styled-system.
A theme friendly, easy to use react-native toast component built using styled-components and styled-system.

react-native-styled-toast Themeable react-native toast component built using styled-components & styled-system. Features Pure JS implementation Suppor

Simple and easy to use TextArea for React Native.
Simple and easy to use TextArea for React Native.

Installation Add the dependency: React Native npm i @freakycoder/react-native-text-area Peer Dependencies IMPORTANT! You need install them Zero Depend

Releases(0.1.10)
Owner
FreakyCoder
Software Engineer Game Developer, Designer, Blogger, Animal Lover
FreakyCoder
An easy to use date picker for react native.

React Native Neat Date Picker An easy-to-use date picker for react native. Main Features ?? Both Android and iOS devices are supported ?? Providing ra

Guan-Ting Su 32 Sep 21, 2022
Smooth and fast cross platform Material Design date and time picker for React Native Paper

Smooth and fast cross platform Material Design date and time picker for React Native Paper

webRidge 395 Sep 24, 2022
Picker is a cross-platform UI component for selecting an item from a list of options.

@react-native-picker/picker Android iOS PickerIOS Windows MacOS Supported Versions @react-native-picker/picker react-native react-native-windows >= 2.

null 1k Sep 30, 2022
An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker An awesome and cross-platform React Native date picker and calendar component for iOS and Android. This package is des

chenlong 86 Sep 19, 2022
react-native-wheel-picker-android โ˜…186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Kalon.Tech 330 Sep 22, 2022
Simple date range picker extended from react-native-calendars

react-native-date-range-picker A simple Date Range Picker implemented with react-native-calendars. Getting started Install react-native-calendars. Cop

Nixon 92 Sep 14, 2022
React Native date and time pickers for Android

react-native-date React Native date and time pickers for Android Installation and How to use Step 1 - NPM Install npm install --save react-native-date

Igor Adrov 45 Apr 10, 2019
react-native-wheel-picker โ˜…190 - React native cross platform picker.

react-native-wheel-picker Introduction Cross platform Picker component based on React-native. Since picker is originally supported by ios while Androi

Yu Zheng (Sam) 296 Sep 27, 2022
Expo Music Picker - A music picker library for React Native

A music picker library for React Native. Provides access to the system's UI for selecting songs from the phone's music library.

Bartล‚omiej Klocek 52 Sep 15, 2022
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker.

react-native-multi-selectbox Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the commo

Saurav Gupta 168 Sep 15, 2022