Package Exports

react-native-calendarview-datepicker

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-calendarview-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-calendarview-datepicker

GitHub top language GitHub code size in bytes Hits

📦 Installation

npm i react-native-calendarview-datepicker

yarn add react-native-calendarview-datepicker

📺 Preview

banner-image

🚀 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