import DatePicker from 'react-native-date-ranges';

//range picker
<DatePicker
	style={ { width: 350, height: 45 } }
	customStyles = { {
		placeholderText:{ fontSize:20 } // placeHolder style
		headerStyle : {  },			// title container style
		headerMarkTitle : { }, // title mark style 
		headerDateTitle: { }, // title Date style
		contentInput: {}, //content text container style
		contentText: {}, //after selected text Style
	} } // optional 
	centerAlign // optional text will align center or not
	allowFontScaling = {false} // optional
	placeholder={'Apr 27, 2018 → Jul 10, 2018'}
	mode={'range'}
/>

//single picker
<DatePicker
	style={ { width: 350, height: 45 } } // default width will be equal to placeholder text width
	customStyles = { {
		placeholderText:{ fontSize:20 }, // placeHolder style
		headerStyle : {  },			// title container style
		headerMarkTitle : { }, // title mark style 
		headerDateTitle: { }, // title Date style
		contentInput: {}, //content text container style
		contentText: {}, //after selected text style
                monthPickerText: {}, //focused month picker text style
                datePickerText: {}, //calendar dates text style
                dayNameText: {} //day of week title text style (M, T, W, T, F, S, S)
	} } // optional 
	centerAlign // optional text will align center or not
	allowFontScaling = {false} // optional
	placeholder={'Apr 27, 2018'}
	selectedBgColor="black"
	selectedTextColor="blue"
        calendarBgColor="black"
/>


//customButton usage...
export default class NewPicker extends React.Component{
	
	customButton = (onConfirm) => (
		<Button
			onPress={onConfirm}
			style={{ container:{ width:'80%', marginHorizontal:'3%' }, text:{ fontSize: 20 } }}
			primary
			text={'送出'}
		/>
	)

  render(){
    const {
      ...rest
    } = this.props;
    return(
      <DatePicker
        ref = {(ref)=> this.picker = ref}
        {...rest}
        customButton = {this.customButton}
      />
    )
  }
}