txend-react-native-ui-datepicker

DateTimePicker component for React Native that allows you to create a customizable date and time picker. The component uses Day.js library and it contains a set of style props that allows you to change every item of calendar based on your own UI design. Please visit demo.

Installation

npm install txend-react-native-ui-datepicker

Or

yarn add txend-react-native-ui-datepicker

Usage

import DateTimePicker from 'txend-react-native-ui-datepicker';
import dayjs from 'dayjs';

export default function App() {
  const [value, setValue] = useState(dayjs());
  
  return (
    <View style={styles.container}>
      <DateTimePicker
        value={value}
        onValueChange={(date) => setValue(date)}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

For more, take a look at the /example directory.

Available props

| Name | Type | Default | Description | | ------------------------ | --------------- | --------------- | -------------------------------------------------------------------------------------- | | value | DateType | Dayjs | DatePicker value to display selected date | | onValueChange | func | () => {} | Called when the new date selected from DatePicker | | mode | string | 'datetime' | Defines the DatePicker mode ['datetime', 'date', 'time'] | | locale | string | 'en' | Defines the DatePicker locale | | minimumDate | DateType | null | Defines DatePicker minimum selectable date | | maximumDate | DateType | null | Defines DatePicker maximum selectable date | | firstDayOfWeek | number | 0 | Defines the starting day of week, number 0-6, 0 - Sunday, 6 - Saturday | | displayFullDays | boolean | false | Defines show previous and next month's days in the current calendar view | | calendarTextStyle | TextStyle | null | Defines all text styles inside the calendar (Days, Months, Years, Hours, and Minutes) | | selectedTextStyle | TextStyle | null | Defines selected (Day, Month, Year) text styles | | selectedItemColor | string | '#0047FF' | Defines selected (Day, Month, Year) background and border colors | | headerContainerStyle | ViewStyle | null | Defines calendar header container style | | headerTextContainerStyle | ViewStyle | null | Defines calendar header texts (Month, Year, Time) containers style | | headerTextStyle | TextStyle | null | Defines calendar header text styles (Month, Year, Time) | | headerButtonStyle | ViewStyle | null | Defines calendar header "prev and next buttons" containers style | | headerButtonColor | string | null | Defines calendar header "prev and next buttons" icon color | | headerButtonSize | number | 18 | Defines calendar header "prev and next buttons" icon size | | headerButtonsPosition | string | 'around' | Defines calendar header "prev and next buttons" positions ['around', 'right', 'left']| | buttonPrevIcon | ReactNode | undefined | Defines calendar header "prev button" custom icon | | buttonNextIcon | ReactNode | undefined | Defines calendar header "next button" custom icon | | dayContainerStyle | ViewStyle | null | Defines days containers style | | todayContainerStyle | ViewStyle | null | Defines today container style | | todayTextStyle | TextStyle | null | Defines today text style | | monthContainerStyle | ViewStyle | null | Defines months containers style | | yearContainerStyle | ViewStyle | null | Defines years containers style | | weekDaysContainerStyle | ViewStyle | null | Defines weekdays container style | | weekDaysTextStyle | TextStyle | null | Defines weekdays texts style | | timePickerContainerStyle | ViewStyle | null | Defines time picker container style | | timePickerTextStyle | TextStyle | null | Defines time picker (Hours, Minutes) texts style |

Contributing

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

Consider supporting with a ⭐️ Star on GitHub

If you are using the library in one of your projects, please consider supporting it with a star.

License

MIT