AwrminKhodaei / react-native-horizontal-datepicker

Gregorian and Jalali customizable date picker as a horizontal timeline. inspired by @sobimor

react-native-horizontal-datepicker

Jalali and gregorian 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