npm

@awrminkhodaei/react-native-horizontal-datepicker
TypeScript icon, indicating that this package has built-in type declarations

0.1.6 • Public • Published

react-native-horizontal-datepicker

Jalali and gregorian react native horizontal datepicker 🔥

@awrminkhodaei/react-native-horizontal-datepicker

@awrminkhodaei/react-native-horizontal-datepicker

Installation

npm install @awrminkhodaei/react-native-horizontal-datepicker

or

yarn add @awrminkhodaei/react-native-horizontal-datepicker

Usage

import HorizontalDatepicker from '@awrminkhodaei/react-native-horizontal-datepicker';

// ...

<HorizontalDatepicker
  mode="gregorian"
  startDate={new Date('2020-08-20')}
  endDate={new Date('2020-08-31')}
  initialSelectedDate={new Date('2020-08-22')}
  onSelectedDateChange={(date) => setSelectedDate(date)}
  selectedItemWidth={170}
  unselectedItemWidth={38}
  itemHeight={38}
  itemRadius={10}
  selectedItemTextStyle={styles.selectedItemTextStyle}
  unselectedItemTextStyle={styles.selectedItemTextStyle}
  selectedItemBackgroundColor="#222831"
  unselectedItemBackgroundColor="#ececec"
  flatListContainerStyle={styles.flatListContainerStyle}
/>;

Props

  • mode (String) : defines datepickers mode, jalali | gregorian
  • startDate (Date): starting date of picker, ex: startDate= new Date('2020-12-01')
  • endDate (Date): ending date of picker, ex: endDate= new Date('2020-12-10')
  • onSelectedDateChange (Function): callback when pressing an item on picker with selectedDate value
  • initialSelectedDate (Date): sets default selected item on picker
  • selectedItemWidth (Number): width of selected item on picker defaults to 170
  • unselectedItemWidth (Number): width of unselected item on picker defaults to 38
  • itemHeight (Number): sets all items height on picker defaults to 38
  • itemRadius (Number): sets all items radius on picker defaults to 10
  • selectedItemTextStyle (TextStyle): selected items text style, ex: selectedItemTextStyle={{fontFamily: 'nunito'}}
  • unselectedItemTextStyle (TextStyle): unselected items text style, ex: selectedItemTextStyle={{fontFamily: 'nunito'}}
  • selectedItemBackgroundColor (String): sets selected items background color, defaults to #16213e
  • unselectedItemBackgroundColor (String): sets unselected items background color, defaults to #fff
  • flatListContainerStyle (ViewStyle): sets contentContainerStlye of FlatList containg date items

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Package Sidebar

Install

npm i @awrminkhodaei/react-native-horizontal-datepicker

Weekly Downloads

18

Version

0.1.6

License

MIT

Unpacked Size

58.6 kB

Total Files

27

Last publish

Collaborators

  • awrminkhodaei