Skip to content

nipunravisara/react-native-calendarview-datepicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

30 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

React-native-calendarview-datepicker

GitHub top language GitHub code size in bytes npm GitHub tag (latest by date) Hits banner-image

πŸ“¦ Installation

npm i react-native-calendarview-datepicker

or

yarn add react-native-calendarview-datepicker

πŸ“Ί Preview

banner-image 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