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:

React Native Styled Datepicker For React

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

You Might Be Interested In:

Add Comment