nipunravisara / react-native-calendarview-datepicker

🌿 React-native-calendar-date-picker component.

React-native-calendarview-datepicker

📦 Installation

npm i react-native-calendarview-datepicker

or

yarn add react-native-calendarview-datepicker

📺 Preview

🚀 Basic Usage

Default

You can simply add date-picker as follows. It shows minimal default calendar. But you can customize as you wish.

import DatePickerCalendar from 'react-native-calendarview-datepicker';
import Moment from 'moment';

...

const App = () => {
  const [date, setDate] = useState(moment());

  return (
        <DatePickerCalendar date={date} onChange={(selectedDate) => setDate(selectedDate)}/>
  );
};

Customized

You can have full control of calendar picker. Pass your own calendar header and condition styles for darkmode.

import DatePickerCalendar from 'react-native-calendarview-datepicker';
import Moment from 'moment';

...

const App = () => {
  const [date, setDate] = useState(moment());
  
  //Custom datepicker header
const customHeader = (date, month, year, setMonth, setYear) => {
    return (
        <View style={{flexDirection: "row", justifyContent: 'space-between'}}>
            <View>
                <View>
                    <Text style={{color: "#fff", fontSize: 18, opacity: 0.5, marginBottom: 4}}>{year}</Text>
                </View>
                <View>
                    <Text style={{
                        color: "#fff",
                        fontSize: 25,
                        fontWeight: 'bold'
                    }}>{moment(date).format("MMMM Do YYYY")}</Text>
                </View>
            </View>
            <View style={{flexDirection: "row", alignItems: 'center'}}>
                <TouchableOpacity style={{
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginRight: 10,
                    height: 40,
                    width: 40,
                    backgroundColor: "#155B3C",
                    borderRadius: 100
                }} onPress={() => setMonth(month - 1)}>
                    <Text style={{color: "#18D183", fontSize: 30, marginBottom: 5}}>{'‹'}</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{
                    alignItems: 'center',
                    justifyContent: 'center',
                    height: 40,
                    width: 40,
                    backgroundColor: "#155B3C",
                    borderRadius: 100
                }} onPress={() => setMonth(month + 1)}>
                    <Text style={{color: "#18D183", fontSize: 30, marginBottom: 5}}>{'›'}</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

  return (
        <DatePickerCalendar
            date={date}
            onChange={(selectedDate) => setDate(selectedDate)}
            placeholder="Select date"
            placeholderStyles={{color: "#04e37d"}}
            fieldButtonStylesDateFormat="MMM Do YY"
            fieldButtonStyles={{width: '95%', backgroundColor: "#1D323E", borderRadius: 12, borderWidth: 2, borderColor: "#18D183", paddingLeft: 20}}
            fieldButtonTextStyles={{color: "#18D183"}}
            modalBackgroundColor={"#1D323E"}
            weekHeaderTextColor={"#18D183"}
            datesColor={"#fff"}
            selectedDateColor={"#1D323E"}
            selectedDateHighlightColor={"#18D183"}
            selectedDateHighlightRadius={5}
            customHeader={(date, month, year, setMonth, setYear) => customHeader(date, month, year, setMonth, setYear)}
            headerStyles={{padding: 0}}
        />
  );
};

📑 API Reference

Props	Type	Description
date	Moment	If your need to show placeholder on initial load just pass undefined, else for default value pass moment() object
onChange	Function	Callback triggered on date select (Required)
placeholder	String	Custom placeholder text
placeholderStyles	Object	Placeholder text styles
modalBackgroundColor	String	Calendar modal background color
headerStyles	Object	Header wrapper styles
customHeader	Function	Function should return a component. Args: (date, month, year, setMonth, setYear)
weekHeaderTextColor	String	Week days names text color
selectedDateHighlightColor	String	Selected date highlight marker color
selectedDateHighlightRadius	Number	Selected date highlight marker radius
datesColor	String	Calendar date color
selectedDateColor	String	Selected calendar date color
fieldButtonStylesDateFormat	String	Selected date showing format. Available formats
fieldButtonStyles	Object	Field button styles
fieldButtonTextStyles	Object	Field button text styles

🗞 License

React-native-calendarview-datepicker is licensed under the MIT License