# react-native-daterange

[![npm version](https://img.shields.io/npm/v/react-native-daterange.svg?style=flat-square)](https://www.npmjs.com/package/react-native-daterange)
[![npm downloads](https://img.shields.io/npm/dm/react-native-daterange.svg?style=flat-square)](https://www.npmjs.com/package/react-native-daterange)

## Getting started

`$ npm install react-native-daterange --save`

![alt text](https://raw.githubusercontent.com/jewsforjesus/react-native-daterange/master/ezgif.com-video-to-gif.gif)

## Usage

```javascript
import DatePicker from 'react-native-daterange';

//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 }}
  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'}
  selectedBgColor="black"
  selectedTextColor="blue"
/>


//customButton usage...
export default class NewPicker extends React.Component{
  customButtonOnPress = () => {
    console.log('customButton');
    this.picker.onConfirm();
  }
  render(){
    const {
      ...rest
    } = this.props;
    const customButton = (<Button onPress={this.customButtonOnPress} style={{ container:{ width:'80%', marginHorizontal:'3%' }, text:{ fontSize: 20 } }} primary text={'Set'}/>);
    return(
      <DatePicker
        ref = {(ref)=> this.picker = ref}
        {...rest}
        customButton = {customButton}
      />
    )
  }
}

```

## Props

| Prop                    | Type        | Description                                                                                                                            |
| :---------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------- |
| **`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)) |
| **`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 "Select Date", 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                                                                      |

....