JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 22205
  • Score
    100M100P100Q141142F
  • License MIT

Customizable datetime picker for React Native

Package Exports

  • react-native-ui-datepicker
  • react-native-ui-datepicker/lib/commonjs/index.js
  • react-native-ui-datepicker/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-ui-datepicker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-ui-datepicker

react-native-ui-datepicker

styled with prettier license

UI DatePicker component for React Native that allows you creating customizable date and time picker. The component use Day.js library and it contains a set of style props that allows you to change every items of calendar based on your own ui design.

Installation

npm install react-native-ui-datepicker

Or

yarn add react-native-ui-datepicker

Usage

import DateTimePicker from '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.

react-native-ui-datepicker-styles

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
displayFullDays boolean false Defines show prev and next month days in current calendar view
calendarTextStyle TextStyle null Defines all texts styles inside 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 texts 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 with a star.

License

MIT