Nylon Pendulum Movement

    react-native-datetimepicker-pro

    1.0.4 • Public • Published

    React Native DateTimePicker Pro 📆

    A customizable calendar, time & month picker for React Native (including Persian Jalaali calendar & locale). For more information and documentation, please visit website

    Installation

    npm package users

    npm i react-native-datetimepicker-pro

    yarn package users

    yarn add react-native-datetimepicker-pro

    Screenshot_1652875688

    Screenshot_1652875715

    Screenshot_1652875701

    Examples

    Basic example

    import React, { useState } from 'react';
    import DatePicker from 'react-native-datetimepicker-pro';
    
    const BasicUsage = () => {
      const [selectedDate, setSelectedDate] = useState('');
    
      return (
        <DatePicker
          onSelectedChange={date => setSelectedDate(date)}
        />
      );
    };
    

    Jalali Calendar

    import React from 'react';
    import DatePicker, { getFormatedDate } from 'react-native-datetimepicker-pro';
    
    const JalaliExample = () => {
      return (
        <DatePicker
          isGregorian={false}
          options={{
            defaultFont: 'Shabnam-Light',
            headerFont: 'Shabnam-Medium',
          }}
          selected={getFormatedDate(new Date(), 'jYYYY/jMM/jDD')}
        />
      );
    };
    

    API

    Props

    Prop Type Optional Default Description
    isGregorian bool Yes true Gregorian calendar is the default. if shamsi is required set this prop to false.
    selected string Yes null for gregorian the format should be 'YYYY-MM-DD' and for shamsi 'jYYYY/jMM/jDD'
    onSelectedChange func No (required) Selected date is returned as a parameter to the function.
    options props Yes Some visual effects like font and colors are asigned threw this prop. Check the options prop description table for more info.

    Options Props

    Prop Type Optional Default Description
    defaultFont string Yes 'System' font of dates and times.
    headerFont string Yes 'System' font of the headers
    textFontSize int Yes 15
    textHeaderFontSize int Yes 17
    mainColor string Yes #61dafb any color format is supported.
    backgroundColor string Yes #fff any color format is supported.
    textHeaderColor string Yes #212c35 any color format is supported.
    textDefaultColor string Yes #2d4150 any color format is supported.
    selectedTextColor string Yes #2d4150 any color format is supported.
    textSecondaryColor string Yes #7a92a5 any color format is supported.
    borderColor string Yes #rgba(122, 146, 165, 0.1) any color format is supported.

    Install

    npm i react-native-datetimepicker-pro

    DownloadsWeekly Downloads

    8

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    49.2 kB

    Total Files

    13

    Last publish

    Collaborators

    • h_assefi