lchenfox / react-native-common-date-picker

An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker

An awesome and cross-platform React Native date picker and calendar component for iOS and Android.

This package is designed to integrade common date components like calendars, date, date-time, etc. Next, we are gonna provide more optional parameters and styles for developers who like this package. We hope to make it high-performance and high-efficiency in the future.

If you like it, just give stars ⭐️⭐️⭐️. If you come to any problems with this repository, please feel free to submit issues. Any PR is welcome.

Date Picker Screenshots

Android 1	Android 2	Android 3	Android 4

iOS 1	iOS 2	iOS 3	iOS 4

Calendar Screenshots

Android 1	Android 2	Android 3	Android 4

iOS 1	iOS 2	iOS 3	iOS 4

Date Picker GIF	Calendar GIF

Contents

1. Features
2. Installation
3. Usage
4. Parameters
5. To do
6. License

Features

Uniform style(iOS&Android)

For DatePickerIOS and DatePickerAndroid provided by the official(now Deprecated, Use @react-native-community/datetimepicker instead) are implemented in different ways, which causes a lot of frustration among developers. For cross-platform, we all hope it to be unified on ios and Android.

Multiple date types

Of course, you can show only month/year、year/month、year/month/day、month/day/year via type parameter, etc. It's compeltely customized by yourself.

Calendar list and date picker supported

Now Calendar list and date picker are supported, you can select the type according to your needs. Besides, we are gonna support more parameters and types controlled by users. So stay tuned!

Easy installation and usage

The installation and usage are very easy and simple due to being implemented by pure JavaScript. No react-native link is required. Many props and styles are completely under your control. It's up to you! Above all, all React Native versions are supported!

Installation

The installation is very easy. You just install this package via one command. No react-native link is required.

npm install react-native-common-date-picker

Usage

Date Picker

import {DatePicker} from "react-native-common-date-picker";

<DatePicker
    confirm={date => {
        console.warn(date)
    }}
/>

Calendar

import {CalendarList} from "react-native-common-date-picker";

<Modal animationType={'slide'} visible={this.state.visible}>
     <CalendarList
          containerStyle={{flex: 1}}
          cancel={() => this.setState({visible: false})}
          confirm={data => {
              this.setState({
                   selectedDate1: data[0],
                   selectedDate2: data[1],
                   visible: false,
              });
          }}
     />
</Modal>

More examples: example directory

Parameters

DatePicker Parameters

Name	Type	Description
backgroundColor	string	Container background color. Default is 'white'.
type	string	Date type in order. Default is 'YYYY-MM-DD'. WOW! All kinds of date type order are supported. Awesome! NOTE: for 'MM-DD'、'DD-MM'、'MM', the same year for minDate and maxDate is required. E.g: minDate={'2020-03-10'}, maxDate={'2020-06-25'}. For 'DD', the year and the month for minDate and maxDate must be the same. E.g: minDate={'2020-03-06'}, maxDate={'2020-03-25'}. Supported types: 'YYYY-MM-DD', 'MM-DD-YYYY', 'DD-MM-YYYY', 'YYYY-MM', 'MM-YYYY', 'MM-DD', 'DD-MM', 'YYYY', 'MM', 'DD',
minDate	string or Date	The min date. Default is '2000-1-1'. Other supported formats: '2000-01-01'、'2000-1-01'、'2000-01-1'、'2000/01/01'、'2000/1/1'. A string type or Date type are supported.
maxDate	string or Date	The min date. Default is today. Other supported formats are the same as minDate. A string type or Date type are also supported. E.g: new Date().
defaultDate	string or Date	The default date. Default is equal to maxDate. Other supported formats are the same as minDate and maxDate. A string type or Date type are also supported. E.g: new Date().
showToolBar	bool	Whether to show tool bar, default is true. If false, hide tool bar on top.
toolBarPosition	string	The position of tool bar, default is 'top' that is at the top of screen. So far, just both 'top' and 'bottom' are supported.
toolBarStyle	object	tool bar view styles, passed like {backgroundColor: 'red'} as you like.
toolBarCancelStyle	object	Tool bar cancel button text styles, passed like {color: 'red', fontSize: 15} as you like. Note that you can control the active opacity of the button through {activeOpacity: 1}.
toolBarConfirmStyle	object	Tool bar confirm button text styles, passed like {color: 'red', fontSize: 15} as you like. Note that you can control the active opacity of the button through {activeOpacity: 1}.
titleStyle	object	Tool bar title text style.
titleText	string	Tool bar title text, default is "".
cancelText	string	Tool bar cancel button text, default is "Cancel".
confirmText	string	Tool bar confirm button text, default is "Confirm".
onValueChange	function	On date value change callback in real time. Once you has selected the date each time, you'll get the date you selected. For example, you can set like this to get the selected date via onValueChange={selectedDate => console.warn(selectedDate)}
cancel	function	Tool bar cancel button callback.
confirm	function	Tool bar confirm button callback with a date string like "2020-06-10".
cancelDisabled	bool	Whether to disable the cancel button. Default is false.
confirmDisabled	bool	Whether to disable the confirm button. Default is false.
width	string or number	Width for date picker. Default is screen width. Note that the height for date picker relied on the rowHeight and the rows below.
rows	number	Row number for date picker. Default is 5. Note that Only one of [5, 7] is supported up to now. E.g: rows={7} or rows={'7'}.
rowHeight	string or number	Height for each row. Default is 35.
selectedRowBackgroundColor	string	Background color for the selected row. Default is 'white'.
unselectedRowBackgroundColor	string	Background color for the unselected row. Default is 'white'.
selectedBorderLineColor	string	Border line color for the selected row. Default is '#d3d3d3'.
selectedBorderLineWidth	string or number	Border line width for the selected row. Default is 0.5. string and number type are supported. E.g: selectedBorderLineWidth={20} or selectedBorderLineWidth={'20'}
selectedBorderLineMarginHorizontal	string or number	Border line margin horizontal. Default is 0.
selectedTextFontSize	string or number	Font size for the selected row text. Default is 22. string and number type are supported. E.g: selectedTextFontSize={20} or selectedTextFontSize={'20'}.
selectedTextColor	string	Text color for the selected row text. Default is 'black'.
selectedTextStyle	object	The selected text styles. Note that if both selectedTextStyle and selectedTextFontSize are set, selectedTextStyle will have higher priority. For example, if selectedTextStyle={{fontSize: 15}} and selectedTextFontSize=10, then the selected size will be 15.
unselectedTextColor	string	Text color for the unselected row text. Default is '#9d9d9d'.
unselectedTextStyle	object	The unselected text styles. Note that if both unselectedTextStyle and unselectedTextColor are set, unselectedTextStyle will have higher priority. For example, if unselectedTextStyle={{color: 'white'}} and unselectedTextColor={'black'}, then the unselected text color will be white. Besides, the fontSize is not supported for the unselected text, it's only determined by the selected text font size setting. For example, if you set unselectedTextStyle={{fontSize: 15}}, it won't work.
textMarginHorizontal	string or number	Text margin horizontal distance to left and right. Default is 0.
monthDisplayMode	string	The display of the month. Default is 'digit', namely "1, 2, 3, ..., 12". If monthDisplayMode={'en-short'}, "Jan, Feb, ..., Nov, Dec" will be displayed. If monthDisplayMode={'en-long'}, similarly, "January, February, ..., November, December" will be displayed. Supported values: 'digit', 'en-short', 'en-long'.
yearSuffix	string	Year suffix string to display for each row. E.g: if yearSuffix={'年'}, the year column will follow a '年' suffix like 2020年.
monthSuffix	string	Month suffix string to display for each row. E.g: if monthSuffix={'月'}, the month column will follow a '月' suffix like 6月.
daySuffix	string	Day suffix string to display for each row. E.g: if daySuffix={'日'}, the year column will follow a '日' suffix like 10日.

CalendarList Parameters

Name	Type	Description
containerStyle	object	Styles for container, you can set it as any view prop styles such as {backgroundColor: 'red'}.
scrollContentStyle	object	Styles for scroll list - FlatList, you can set it as any view prop styles such as {backgroundColor: 'red'}.
showToolBar	bool	Whether to show tool bar, default is true. If false, hide tool bar on top.
toolBarPosition	string	The position of tool bar, default is 'top' that is at the top of screen. So far, just both 'top' and 'bottom' are supported.
toolBarStyle	object	tool bar view styles, passed like {backgroundColor: 'red'} as you like.
toolBarCancelStyle	object	tool bar cancel button text styles, passed like {color: 'red', fontSize: 15} as you like. Note that you can control the active opacity of the button through {activeOpacity: 1}.
toolBarConfirmStyle	object	tool bar confirm button text styles, passed like {color: 'red', fontSize: 15} as you like. Note that you can control the active opacity of the button through {activeOpacity: 1}.
titleStyle	object	tool bar title text style.
titleText	string	tool bar title text, default is "".
cancelText	string	tool bar cancel button text, default is "Cancel".
confirmText	string	tool bar confirm button text, default is "Confirm".
cancel	function	tool bar cancel button callback.
confirm	function	tool bar confirm button callback with a date array like ["2016-01-09", "2019-09-18"]. "2016-01-09" is the start date(min date) you selected. "2019-09-18" is the end date(max date) you selected. If nothing is selected, the array's elements will be empty string like ["", ""].
cancelDisabled	bool	Whether to disable the cancel button. Default is false.
confirmDisabled	bool	Whether to disable the confirm button. Default is false.
onPressDate	function	A callback with a date parameter(like "2019-08-09") and row index when the user presses some date item.
minDate	string or Date	Min date to limit, default is "2000-01-01". Other supported formats: "2000-1-1", "2000/01/01", "2000/1/1".
maxDate	string or Date	Max date to limit, default is today calculated by new Date(). Other supported formats: "2015-1-1", "2015/01/01", "2015/1/1".
defaultDates	string or Date	The default dates for the initial selected values. Note: the count of defaultDates must be equal to 2. That is to say, you must pass two elements for it. For instance: defaultDates={['2015-10-10', '2020-01-01']} or defaultDates={['2015-10-10', new Date()]}. Attention! The first element must be greater than or equal to the minDate. The second element must be less than or equal to the maxDate. Or it will not work as you expected.
showWeeks	bool	Whether to show weeks, default is true.
weeks	Array	Week days to show, default is from Sunday to Saturday, namely ['Su','Mo','Tu','We','Th','Fr','Sa']. Note that if you want to custom "weeks", then you have to accomplish "firstDayOnWeeks" at the same time. For example, you passed "['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']" to "weeks", you must pass 1 to "firstDayOnWeeks" equal to "firstDayOnWeeks={1}". What's more, 1 means Monday, 2 means Tuesday, ..., 0 Means Sunday.
weeksChineseType	bool	Weeks type. Default is false, namely ['Su','Mo','Tu','We','Th','Fr','Sa']. If you want to use chinese, such as ['日','一','二','三','四','五','六'], just setting "weeksChineseType={true}" is okay. But the precondition is that "weeks" above uses the default value. Or it will be invalid.
firstDayOnWeeks	number	The first day for weeks. Default is 0 equal to Sunday. If you'd like to start with Saturday, "firstDayOnWeeks={6}" will work. The value ranges from 0 to 6.
weeksStyle	object	For week days, set the container styles like {backgroundColor: 'red'}.
weeksTextStyle	object	For week days, set the week day text styles like {color: 'blue', fontSize: 14}.
headerTitleType	number	Display form of the header title. Default is 0. Take "2020-04" date as an example: 0: "2020-04", 1: "2020年4月", 2: "Apr 2020", 3: "April 2020", 4: "2020/04", 5: "04/2020".
listItemStyle	object	Content styles containing header title and days content. This is a nesting object style. So if you want to set some specific style such as "headerTitle", you can set it to {headerTitle: {fontSize: 18, color: 'red'}}.
selectedDateMarkType	string	Selected date mark type. Default is 'ellipse', other choices: 'semiellipse'、'rectangle'、'circle'、 'square'、'dot'.
selectedDateMarkColor	string	Selected date mark background color for start date and end date. Default is 'magenta'.
selectedDateMarkRangeColor	string	Selected date mark background color between start date and end date. Default is 'skyblue'.
beyondDatesDisabled	bool	When the date is out of minDate or maxDate, whether to disable the button. Default is true.
beyondDatesDisabledTextColor	string	When the date is out of minDate or maxDate, the button text color. Default is '#b9b9b9'.
leftArrowClick	function	Left arrow click callback with current date index parameter. Only when "horizontal={true}".
rightArrowClick	function	Right arrow click callback with current date index parameter. Only when "horizontal={true}".
hideArrow	bool	Whether to hide arrow. Default is false. Only when "horizontal={true}".
arrowColor	string	Arrow color. Default is 'gray'. Only when "horizontal={true}".
arrowSize	number	Arrow size. Default is 8. Only when "horizontal={true}".
arrowAlign	string	Arrow align. Default is 'left'. One of ['left', 'center', 'right']. Only when "horizontal={true}".
horizontal	bool	Seen as FlatList component. Default is false.
scrollEnabled	bool	Seen as FlatList component.
pagingEnabled	bool	Seen as FlatList component. Default is false.
--	--	Other FlatList's props can be Seen in FlatList docs.

To do

• Modal is supported by default
• Add: datetime, time

License

MIT

react-native-common-date-picker's Issues

CalendarList是否支持默认选中日期

请问CalendarList支持默认选中日期阶段嘛？

onPressDate 回调问题

onPressDate 点击两次才能调用一次
应该每次都调用 然后我们可以自己定义底部工具栏 判断是否可以点击

Disabled dates

is it possible to disable some dates? as for some reservation systems you cant select certain dates which are booked already.

CalendarList组件支持defaultValues嘛?

CalendarList是否支持defaultValues?

defaultDate 再次点击不会更新

Can't change the fontFamily

I want to change the font family of text called year, month, and date. Unfortunately, I can't see any parameter named like that. Could you shed some light on that?

CalendarList doesn't focus on current date

Hello,

I am trying to make the CalendarList to focus on a specific date upon appearance by setting defaultDates to some value,
but the component keeps focusing on the minDate. The code below is what i use.

<CalendarList
    containerStyle={{ flex: 1 }}
    titleText="Select Date"
    showToolBar={false}
    cancel={() => setVisibleCallendar(false)}
    onPressDate={(date) => {
        setSelectedCalendarDate(date);
        setVisibleCallendar(false);
    }}
    minDate={'2021-01-01'}
    maxDate={new Date()}
    defaultDates={[new Date(), new Date()]}
/>

In my opinion the expected behavior of a datepicker is to show the current date on render not the minDate.

Is there any way to achieve this?

I'm on version: 2.3.6

---

Update - Workaround

I found this in the CalendarList source code:

react-native-common-date-picker/src/calendar/CalendarList.js

Lines 128 to 131 in 4c2d292

	/**
	* See FlatList docs. If you'd like to do something outside. e.g: you maybe want to scroll to the end. Then you can
	* use "<CalendarList ref={ref => this.calendarList = ref}; this.calendarList.scrollToEnd()" to make it work for you.
	*/

I am using functional components with hooks so i added a React.useRef along with <CalendarList ref={calendarRef} ....otherprops on the component.

Even though this works, i still believe that it would be good to be able to define the initial focus date as part of the provided props.

How to get selected value when showToolBar is false in DatePicker?

I hide the default toolbar to use to customized toolbar, how to make it work with the date picker?

Calendar lags

CalendarList blocks js thread for some time when opened in modal
Following is example code

import React from 'react'
import { View, StyleSheet } from 'react-native'
import { CalendarList } from "react-native-common-date-picker"
import Modal from 'react-native-modal'


function CalendarDialog(props) {
    const { isVisible, onHideDialog, onConfirmDateRange } = props


    function hideDialog() {
        onHideDialog && onHideDialog()
    }

    function confirmDateRange(range) {
        onConfirmDateRange && onConfirmDateRange(range)
    }

    function renderCalendar() {
        return (
            <View style={styles.container}>
                <CalendarList
                    minDate={'2020-5-23'}
                    maxDate={'2025-6-6'}
                    titleText={'Select Date Range'}
                    cancel={() => hideDialog()}
                    headerTitleType={5}
                    selectedDateMarkType={'circle'}
                    selectedDateMarkColor={'red'}
                    selectedDateMarkRangeColor={'orange'}
                    headerTitleType={2}
                    horizontal={true}
                    pagingEnabled={true}
                    confirm={data => confirmDateRange(data)}
                />
            </View>
        )
    }

    return (
        <Modal
            testID={'modal'}
            isVisible={isVisible}
            style={{margin:0}}
            onBackdropPress={() => hideDialog()}
            onSwipeComplete={() => hideDialog()}
            transparent={true} 
            swipeDirection={['down']}
            propagateSwipe={true}>
            {renderCalendar()}
        </Modal>
    )

}

const styles = StyleSheet.create({
    container: {
        flex: 1, 
        justifyContent: 'flex-end', 
        backgroundColor: 'rgba(0,0,0,0.5)'
    }
})

export default CalendarDialog

How to change text color on start and end date if the background is black?

Friday & Saturday are missing from calendar

can check is something need to add in this ?

<CalendarList
firstDayOnWeeks={0}
showWeeks={false}
minDate='2022-01-01'
maxDate={new Date()}
containerStyle={{ flex: 1 }}
cancel={() => toggleModel(false)}
confirm={data => {
toggleModel(false);
onDateChange(data[0], data[1])
}}
toolBarPosition="bottom"
confirmText="Apply"
/>

太卡了吧，点了个日历两三秒才反应，这还玩啥

组件打包到线上环境，点击事件延迟十分严重基本上两秒左右（android, ios）所有机型

function renderContent() {
return


<CalendarList
containerStyle={{ flex: 1 }}
defaultDate={state.time}
confirmText={'确定'}
cancelText={'取消'}
cancel={toggleVisible}
minDate={data}
maxDate={'2099-6-6'}
confirm={data => {
handleSetTime(data)
}}
/>


}

Day and date values do not match when used with negative offset timezones

version: 2.3.4

Issue:
• When the device is set in a negative offset time-zone, we observed that for any date the day is shown ahead of the actual day. i.e. 20 November 2021 is shown on Friday instead of Saturday.
• For a positive offset time-zone, we observed that it is displayed correctly.

Here are two screen shots:

支持时间选择吗

Default Date not seleceted

defaultDates={[new Date(), new Date() ]}
after passing this parameter by default not getting selected

react-native-common-date-picker模块引入时报错

通过yarn add方式引入，在页面中使用import方式使用时，报错：react-native-common-date-picker模块找不到

展示有问题

展示不全，有时候只展示月份，有时候是年份，年月日展示随机

老兄，datePicker/DatePicker.js 里面能不能修改一点，兼容更多版本？

139行，176行，<> </> 这个修改下，用View吧，我这儿RN 0.55版本报错。
我自己版本低？？我也没办法啊，公司就是这么用的。
其他地方也顺便看看吧，拜托。。

确实太卡了....

三栏选日期的时候 滑动日期还得等一会才能反应得过来...

我有两个手机 一个小米 一个华为 只在华为上出现过这个问题

还有 使用 Android Studio 模拟器 也会很卡

• • ! 因为这个原因 不得不考虑其他日期选择组件了

Cannot able to give the text colors for selected date

We have an option called selectedDateMarkColor so it's updating the background of that selected date. but I want to update the text color also but there is no option to change it

使用react-native-camera组件扫描二维码后日期显示不正常

<DatePicker confirm={date => { this.confirmDate(date); }} cancel={() => this.dateClear()} cancelText={cancelText} toolBarCancelStyle={{color:'#158EE9',}} confirmText={okText} toolBarConfirmStyle={{color:'#158EE9',}} monthDisplayMode = {'en-long'} maxDate={maxDate} defaultDate={new Date()} // onValueChange={date => this.onDateChange(date)} />

DatePicker 在2.2的版本中无法使用

如题，readme中的demo无法跑通

Request: Date Picker fontFamily

is possible to add fontFamily for DatePicker