Skip to content

AwrminKhodaei/react-native-horizontal-datepicker

Repository files navigation

react-native-horizontal-datepicker

Jalali and gregorian react native horizontal datepicker 🔥

@awrminkhodaei/react-native-horizontal-datepicker

React native horizontal date picker - Animated gif demo

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