0.0.3 • Published 6 months ago

react-native-calendars-picker v0.0.3

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

Installation

npm install react-native-calendars-picker

Or

yarn add react-native-calendars-picker

Usage

import DateTimePicker from 'react-native-calendars-picker';
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',
  },
});

Available props

NameTypeDefaultDescription
valueDateTypeDayjsDatePicker value to display selected date
onValueChangefunc() => {}Called when the new date selected from DatePicker
modestring'single'Defines the DatePicker mode ['single', 'multiple', 'range']
localestring'en'Defines the DatePicker locale
minimumDateDateTypenullDefines DatePicker minimum selectable date
maximumDateDateTypenullDefines DatePicker maximum selectable date
displayFullDaysbooleanfalseDefines show previous and next month's days in the current calendar view
calendarTextStyleTextStylenullDefines all text styles inside the calendar (Days, Months, Years, Hours, and Minutes)
selectedTextStyleTextStylenullDefines selected (Day, Month, Year) text styles
selectedItemColorstring'#0047FF'Defines selected (Day, Month, Year) background and border colors
headerContainerStyleViewStylenullDefines calendar header container style
headerTextContainerStyleViewStylenullDefines calendar header texts (Month, Year, Time) containers style
headerTextStyleTextStylenullDefines calendar header text styles (Month, Year, Time)
headerButtonStyleViewStylenullDefines calendar header "prev and next buttons" containers style
headerButtonColorstringnullDefines calendar header "prev and next buttons" icon color
headerButtonSizenumber18Defines calendar header "prev and next buttons" icon size
headerButtonsPositionstring'around'Defines calendar header "prev and next buttons" positions ['around', 'right', 'left']
buttonPrevIconReactNodeundefinedDefines calendar header "prev button" custom icon
buttonNextIconReactNodeundefinedDefines calendar header "next button" custom icon
dayContainerStyleViewStylenullDefines days containers style
todayContainerStyleViewStylenullDefines today container style
todayTextStyleTextStylenullDefines today text style
monthContainerStyleViewStylenullDefines months containers style
yearContainerStyleViewStylenullDefines years containers style
weekDaysContainerStyleViewStylenullDefines weekdays container style
weekDaysTextStyleTextStylenullDefines weekdays texts style
timePickerContainerStyleViewStylenullDefines time picker container style
timePickerTextStyleTextStylenullDefines time picker (Hours, Minutes) texts style