react-native-week-selector

Usage

import {
  IRangeDateSelectorItem,
  RangeDateSelector,
} from "@phankiet/react-native-week-selector";

<RangeDateSelector
  type={"week"}
  onConfirm={handleChangeWeek}
  weekLabel={t("weekLabel")}
  closeText={t("close")}
  confirmText={t("confirm")}
>
  <View style={[styles.pickerWrapper, { flex: 3 }]}>
    <View style={styles.labelDate}>
      <Text style={styles.pickerText}>{"Select week"}</Text>
      <IonIcon name={"chevron-down"} size={18} color={colors.orangePrimary} />
    </View>
  </View>
</RangeDateSelector>;

Properties

Name Type Default Required Description
children node none true The interface when the user presses to select will display a popup
type "week" or "month" "week" false Type of selector
weekLabel string "Tuần" false Label of week item
formatDate string "DD/MM" false Date format of item
renderItem { item: IRangeDateSelectorItem, index: number, selected: boolean }) => function node false Item UI
selectedColor string "#ccc" false
buttonStyle ViewStyle false
buttonTextStyle TextStyle false
yearTextStyle TextStyle false
labelStyle ViewStyle false
labelTextStyle TextStyle false
closeText string "Đóng" false
confirmText string "Xác nhận" false
currentYear number moment().get("year") false
onConfirm (selected: IRangeDateSelectorItem) => function none false

GitHub

https://github.com/phankietit/react-native-week-selector