Giter Club home page Giter Club logo

react-native-global-datetimepicker's Introduction

Global DateTime Picker

MIT License PR's Welcome npm npm GitHub Repo stars

This package is a global, beautiful, customizable date and time picker for React Native.

Features

  • Time Picker
  • Date Picker
  • Customizable theme
  • Customizable translation
  • Support Jalali(Shamsi) and Gregorian

Demo

DateTimePicker DateTimePicker

Installation

Install it using Yarn:

$ yarn add react-native-global-datetimepicker

Of if you prefer NPM:

$ npm i react-native-global-datetimepicker

Basic Import

After the installation, it's time to import the package in your app:

import GlobalDateTimePicker, {
    CalendarType,
    weekDaysJalali,
    yearMonthsJalali,
    DateTimePickerMode,
    DateTimePickerThemes,
    DateTimePickerTranslations,
} from 'react-native-global-datetimepicker';

Great job! You're all set. It's time to write some code now.

Basic Usage

Let's kick things off by providing an example:

import React, {useState} from "react";
import GlobalDateTimePicker from 'react-native-global-datetimepicker';

export default function App() {
    const [ShowDateTimePicker, setShowDateTimePicker] = useState(false);
    const [SelectedDateJalali, setSelectedDateJalali] = useState<Date>();
    const [SelectedDateGregorian, setSelectedDateGregorian] = useState<Date>();
    return (
        <GlobalDateTimePicker
            visible={ShowDateTimePicker}
            initialDate={SelectedDateGregorian}
            onSelect={(gregorianDate, jalaliDate) => {
                setShowDateTimePicker(false);
                setSelectedDateJalali(jalaliDate);
                setSelectedDateGregorian(gregorianDate);
            }}
            onCancel={() => setShowDateTimePicker(false)} 
        />
    );
}
  • visible prop is the state of visibility of the date picker
  • initialDate prop is the initial value for the date picker, this date value should be gregorian
  • onSelect prop is a function that will take care of changing the date by the user
  • onCancel prop is a function that will take care of dismissing date picker by the user

Advanced Usage

Let's give an advanced example to use

import React, {useState} from "react";
import GlobalDateTimePicker, {DateTimePickerMode} from 'react-native-global-datetimepicker';

export default function App() {
    const [SelectedDateJalali, setSelectedDateJalali] = useState<Date>();
    const [SelectedDateGregorian, setSelectedDateGregorian] = useState<Date>();
    const [PickerMode, setPickerMode] = useState<DateTimePickerMode>(DateTimePickerMode.Day);

    return (
        <GlobalDateTimePicker
            mode={PickerMode}
            persianNumber={true}
            calendar={CalendarType.Jalali}
            visible={PickerMode !== undefined}
            theme={DateTimePickerThemes.Danger}
            initialDate={SelectedDateGregorian}
            translation={DateTimePickerTranslations.fa}
            onSelect={(gregorianDate, jalaliDate) => {
                setShowDateTimePicker(false);
                setSelectedDateJalali(jalaliDate);
                setSelectedDateGregorian(gregorianDate);
            }}
            onCancel={() => setShowDateTimePicker(false)} 
        />
    );
}
  • persianNumber prop enables the converter that converts English number to Arabic number
  • calendar prop is the type of calendar the date picker should be used, there are two types of calendar type available in the library that you can import as CalendarType, the current calendar type is Gregorian and Jalali, default calendar type is Gregorian
  • theme prop is an object that contains the color of each part of the component, there are three themes available in the library that you can import as DateTimePickerThemes and use them, the currently available theme is Primary and Danger and MFCP, the default theme is Primary, also you can create your own theme, the interface is like:
const MFCP = {
    Arrow: '#3b3b3b',
    DayText: '#232323',
    HeaderDay: '#ffc4c9',
    HeaderYear: '#ffc4c9',
    SelectedDay: '#ff4d5b',
    WeekDayText: '#a9a9a9',
    YearItemText: '#232323',
    TodayDayText: '#ff4d5b',
    ButtonRipple: '#2323231A',
    SelectedDayText: '#ffffff',
    SelectDayRipple: '#ff4d5b',
    HeaderBackground: '#ff4d5b',
    ContentBackground: '#ffffff',
    HeaderSelectedMode: '#ffffff',
    SelectedYearItemText: '#ff4d5b',
    TimeSeparator: '#ffb5b7',
    TimeInputForeground: '#ff4d5b',
    TimeInputBackground: '#ffb5b7',
    TimeInputFocusForeground: '#3b3b3b',
    TimeInputFocusBackground: '#ffe7e7',
    SelectedClockForeground: '#ffffff',
    ClockForeground: '#3b3b3b',
    ClockBackground: '#ffe7e7',
    ClockPointer: '#ff4d5b'
}
  • translation prop is an object that contains the text of each part of the component. There are two languages supported units now that you can import as DateTimePickerTranslations and use them. The currently available language is English and Persian.

Contributions

If you're interested in contributing to this project, first of all, I would like to extend my heartfelt gratitude.

Please feel free to reach out to me if you need help. My Email: [email protected] Telegram: @AliRezaBeigy

Build And Test

Use the following command to build and run the example project

$ yarn
$ yarn build # If you have error about cp command, copy src/Assets/*.png to lib/Assets manually
$ cd example
$ yarn
$ yarn run android

LICENSE

MIT

react-native-global-datetimepicker's People

Contributors

alirezabeigy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

react-native-global-datetimepicker's Issues

Wrong weekday

Screenshot 2024-01-03 at 14 01 42

As you can see, the picker is calculating that 13/10/1402 is a Tuesday while it's Wednesday.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.