React Native Styled Datepicker

A React Native styled date picker with a Calendar View, Month Selection view, and Year Selection view.

Built on top of the react-native-calendars.

How to use it:

1. Install & import.

# Yarn
$ yarn add react-native-styled-datepicker

# NPM
$ npm i react-native-styled-datepicker

import DatePicker from "react-native-styled-datepicker";

2. Default component props.

• initialViewDate – initial month to show
• initialSelectedDate – currently selected date – format YYYY-MM-DD
• minDate – minimum date can be selected
• maxDate – maximum date can be selected
• selectedDateStyles – styles for the selected date
• calendarHeaderTextStyles – styles for the calendar header text
• calendarHeaderWrapperStyles – styles for the calendar header wrapper button
• validWeekendDateStyles – styles for weekend date which is in the valid date range
• validWeekDateStyles – styles for weekday date which is in the valid date range
• disabledDateStyles – styles for a date which is outside the valid date range
• arrowWrapperStyles – styles for arrow wrapper
• arrowStyles – styles for arrow
• monthWrapperStyles – styles for month container in month selection
• selectedMonthWrapperStyles – styles for selected month container in month selection
• monthTextStyles – styles for month text in month selection
• selectedMonthTextStyles – styles for selected month text in month selection
• yearWrapperStyles – styles for year container in year selection
• yearTextStyles – styles for year text in year selection
• selectedYearWrapperStyles – styles for selected year container in year selection
• selectedYearTextStyles – styles for selected year text in year selection
• todayDateColor – color of the today’s date text
• weekendDateColor – color of the weekend’s date text
• weekDateColor – color of the weekday’s date text
• disabledDateColor – color of a disabled date text
• selectedDateColor – color of a selected date text
• fontFamily – font family to apply for all text inside the calendar
• onChange – callback to execute when the selected date changed

Preview:

Download Details:

Author: sivantha96

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/sivantha96/react-native-styled-datepicker

License: MIT