react-native-date-ranges

Reference

This component is a clone of react-native-date-range but adding some new props like: textStartDate,textEndDate and alertMessageText.

Getting started

$ npm install @sabroso/react-native-date-range-picker --save

Usage

1import DatePicker from '@sabroso/react-native-date-range-picker';
2
3//range picker
4<DatePicker
5	style={ { width: 350, height: 45 } }
6	customStyles = { {
7		placeholderText:{ fontSize:20 } // placeHolder style
8		headerStyle : {  },			// title container style
9		headerMarkTitle : { }, // title mark style 
10		headerDateTitle: { }, // title Date style
11		contentInput: {}, //content text container style
12		contentText: {}, //after selected text Style
13	} } // optional 
14	centerAlign // optional text will align center or not
15	allowFontScaling = {false} // optional
16	placeholder={'Apr 27, 2018 → Jul 10, 2018'}
17	mode={'range'}
18/>
19
20//single picker
21<DatePicker
22	style={ { width: 350, height: 45 } } // default width will be equal to placeholder text width
23	customStyles = { {
24		placeholderText:{ fontSize:20 }, // placeHolder style
25		headerStyle : {  },			// title container style
26		headerMarkTitle : { }, // title mark style 
27		headerDateTitle: { }, // title Date style
28		contentInput: {}, //content text container style
29		contentText: {}, //after selected text style
30                monthPickerText: {}, //focused month picker text style
31                datePickerText: {}, //calendar dates text style
32                dayNameText: {} //day of week title text style (M, T, W, T, F, S, S)
33	} } // optional 
34	centerAlign // optional text will align center or not
35	allowFontScaling = {false} // optional
36	placeholder={'Apr 27, 2018'}
37	selectedBgColor="black"
38	selectedTextColor="blue"
39        calendarBgColor="black"
40/>
41

Props

Prop	Type	Description
textStartDate	String	optional.
textEndDate	String	optional.
alertMessageText	String	optional.
cancelButtonText	String	optional.
placeholder	String	optional.
customStyles	Object	optional. customize style e.g.({ placeholderText:{}, headerStyle:{} ... })
style	Object	Optional. date picker's style
onConfirm	Function	Optional. call function after click button, that would return a date object {startDate:'', endDate:''} e.g( value=>console.log(value))
calendarBgColor	String	Optional. custom the calendar view background color e.g {"black"}
selectedBgColor	String	Optional. custom your selected date background color e.g {"black"}
selectedTextColor	String	Optional. custom your selected date text color e.g {"black"}
ButtonStyle	Object	Optional. custom your save button container style
ButtonTextStyle	Object	Optional. custom your save button Text style
returnFormat	String	Optional. custom your datetime format e.g.('YYYY/MM/DD') at onConfirm
headFormat	String	Optional. custom your datetime format showing at headBlock e.g.('YYYY/MM/DD')
outFormat	String	Optional. custom your datetime format showing at outline touchable filed e.g.('YYYY/MM/DD')
mode	String	one of ['range', 'single'] , default as single
customButton	component	Optional (total custom your button component)e.g.(<Button></Button>)
blockBefore	Bool	optional. default is false, decide blocke date before today or not
markText	String	optional. default is "選擇日期", you can custom this prop to label text with ur own
buttonText	String	optional. you can modify default button't label with your own
blockAfter	Bool	optional. default is false, decide blocke date after today or not
dateSplitter	String	optional. default is '->', decide custom dateSplitter with String
....