MaxDays, option to disableTime and DateBox

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+dist/
+node_modules/
+package-lock.json

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+	// Use IntelliSense to learn about possible attributes.
+	// Hover to view descriptions of existing attributes.
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"type": "chrome",
+			"request": "launch",
+			"name": "Chrome",
+			"url": "http://localhost:3000",
+			"webRoot": "${workspaceFolder}"
+		}
+	]
+}

README.md

@@ -1,154 +1,254 @@
-# React Advanced  Date Time Range Picker
-[![CircleCI](https://circleci.com/gh/v0ltoz/react-datetimepicker.svg?style=svg)](https://circleci.com/gh/v0ltoz/react-datetimepicker)
-[![](https://badge.fury.io/js/react-advanced-datetimerange-picker.svg)](https://www.npmjs.com/package/react-joyride)
-[![Maintainability](https://api.codeclimate.com/v1/badges/3b5c72752ef7cf3932b9/maintainability)](https://codeclimate.com/github/v0ltoz/react-datetimepicker/maintainability)
-[![Test Coverage](https://api.codeclimate.com/v1/badges/3b5c72752ef7cf3932b9/test_coverage)](https://codeclimate.com/github/v0ltoz/react-datetimepicker/test_coverage)
-<br>
-<b>
-Development still in progress, Stable release coming soon 
-</b>
-<br>
+# anci Date Time Range Picker
 
-This is a fully rewritten, keyboard friendly implementation of a date time range picker. It has been designed for selecting date ranges and does not currently include a single date picker.
+React advanced Date-Time Range Picker
 
-It has been designed currently to work with React Version 15
-
-![Date Time Picker](https://raw.githubusercontent.com/v0ltoz/react-datetimepicker/master/public/Date_Picker_Image.png)
+## General Info
 
+This project is based upon dangrossman daterangepicker (https://github.com/dangrossman/daterangepicker)
 
+The project has been rewritten in React, this is not a JQuery wrap around, thanks to v0ltoz to start this great project.
 
+It is based off of the bootstrap UI with some slight adjustments and added keyboard accessibility such as Keyboard arrow key navigation and Tab navigation. This is a fully rewritten, keyboard friendly implementation of a date time range picker It has been designed for selecting date ranges and partially includes a single date picker.
 
+![Date Time Picker](https://raw.githubusercontent.com/andreaci/react-datetimepicker/master/public/images/demo.png)
 
 ## Setup
+
 Run the following command:
-```bash
-npm install react-advanced-datetimerange-picker
+
+```
+npm install react-anci-daterangepicker
 ```
 
-## Requirements
+## Usage
 
-This project requires react-bootstrap to be installed
+The package exports three components:
 
-## General Info
+**DateTimeRangeComponent**
+Simple, ready to use component.
+It creates the two textboxes by himself and exposes two callbacks for the selected period. This component also manages all optional parameters and create a default ranges sets.
 
-This project is based upon dangrossman daterangepicker (https://github.com/dangrossman/daterangepicker)
+![Ready to use](https://raw.githubusercontent.com/andreaci/react-datetimepicker/master/public/images/ready-to-use.png)
+
+**DateTimeRangeContainer**
+The component used by the DateTimeRangeComponent. Using this directly you can customize how the external textbox behaves.
 
-The project has been rewritten in React, this is not a JQuery wrap around. 
+![Classical](https://raw.githubusercontent.com/andreaci/react-datetimepicker/master/public/images/classical.png)
 
-It is based off of the V2 UI with some slight adjustments and added keyboard accessibility such as Keyboard arrow key navigation and Tab navigation. 
+**DatePickerComponent**
+Simple single-day date picker. No time support.
+
+![Simple single day](https://raw.githubusercontent.com/andreaci/react-datetimepicker/master/public/images/simple-single-day.png)
 
 ## Properties Required
 
 **ranges** {React.Object}  
 Object of ranges that will be you default ranges. Example:
+
 ```js
 let ranges = {
-            "Today Only": [moment(start), moment(end)],
-            "Yesterday Only": [moment(start).subtract(1, "days"), moment(end).subtract(1, "days")],
-            "3 Days": [moment(start).subtract(3, "days"), moment(end)]
-        }
+	'Today Only': [moment(start), moment(end)],
+	'Yesterday Only': [moment(start).subtract(1, 'days'), moment(end).subtract(1, 'days')],
+	'3 Days': [moment(start).subtract(3, 'days'), moment(end)]
+};
 ```
+
 **start (Required)** {Moment Object}  
 Initial Start Date that will be selected, should be a moment object
 
 **end (Required)** {Moment Object}  
 Initial End Date that will be selected, should be a moment object
 
-**local (Required)** {Object}  
-Defines a local format for date labels to be shown as. Can also set Sunday to be first day or Monday. Local object accepts format and sunday first params. 
+**local (Required in _DateTimeRangeContainer_)** {Object}  
+Defines a local format for date labels to be shown as. Can also set Sunday to be first day or Monday. Local object accepts format and sunday first params.
 
---> format: moment display format <br>
---> sundayFirst: True Sunday the first day of the week. False, Monday first day of the week. 
+--> format: moment display format
+--> sundayFirst: True Sunday the first day of the week. False, Monday first day of the week.
 
 ```js
 let local = {
-    "format":"DD-MM-YYYY HH:mm",
-    "sundayFirst" : false
-}
+	format: 'DD-MM-YYYY', // do not put HH:mm here to avoid strange behaviours in textboxes
+	sundayFirst: false
+};
 ```
 
 **applyCallback (Required)** {React.func} <br>
 Function which is called when the apply button is clicked/pressed. Takes two params, that start date and the end date.
 
 ```js
 func applyCallback(startDate, endDate){
-    ... 
+    ...
+}
+```
+
+**rangeCallback** {React.func} <br>
+Function which is called when a custom range is selected. Takes three params, the range id, the array from the definition and an object containing start date and end date.
+
+```js
+func applyCallback(value, data, cbdata){
+    alert(cbdata.start + ' ' + cbdata.end);
 }
 ```
 
+**useVirtualSelection (optional)** {bool} <br>
+Better selection mode.
+
+![Virtual selection](https://raw.githubusercontent.com/andreaci/react-datetimepicker/master/public/images/virtual-selection.gif)
+
+**showCurrentState (optional)** {bool} <br>
+Show the bottom bar with the text "Selecting From / To".
+
+**rangesOnTheRight (optional)** {bool} <br>
+Put custom ranges on the right.
+
+**autoCloseOnSelection (optional)** {bool} <br>
+Auto close the calendar on selection.
+
 **maxDate (optional)** {Moment Object} <br>
-Maximum date that can be selected. 
+Maximum date that can be selected.
+
+**minDate (optional)** {Moment Object} <br>
+Minumum date that can be selected.
 
+**maxDays (optional)** {bool} <br>
+Maximum number of days. Setting to 1 shows only one calendar.
+
+![One day](https://raw.githubusercontent.com/andreaci/react-datetimepicker/master/public/images/one-day.png)
+
+**minYear (optional)** {bool} <br>
+Starting year for combobox.
+
+**maxYear (optional)** {bool} <br>
+Ending year for combobox.
+
+**disabled (optional)** {bool} <br>
+Disable the control.
+
+**enableTime (optional, in _DateTimeRangeComponent_ only)** {bool} <br>
+Disable Time selector. _Used in this way to keep compatibility._
+
+![No time](https://raw.githubusercontent.com/andreaci/react-datetimepicker/master/public/images/no-time.png)
+
+**disableTime (optional, in _DateTimeRangeContainer_ only)** {bool} <br>
+Disable Time selector. _Used in this way to keep compatibility._
+
+**disableDateBox (optional)** {bool} <br>
+Disable the internal date textbox.
+
+**label (optional, in _DatePickerComponent_ only)** {string} <br>
+Change label on top. This can be done also changing the ToDate in translation
+
+**translations (optional)** {object} <br>
+Object containing custom translations.
+
+```js
+let my_translations = {
+	Apply: 'Apply',
+	Cancel: 'Cancel',
+	customRange: 'Custom Range',
+	FromDate: 'From date',
+	ToDate: 'To date',
+	SelectingFrom: 'Selecting from',
+	SelectingTo: 'Selecting to',
+
+	MaxDays: 'Max days',
+	MaxDate: 'Max date',
+
+	months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+	days: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
+};
+```
+
+**calendarStyles (optional)** {object} <br>
+Object containing custom styles for some components.
+
+```js
+let my_styles = {
+	//RANGES SELECTOR
+	normalRangeStyle: () => {
+		return {};
+	},
+	selectedRangeStyle: () => {
+		return {};
+	},
+
+	//CALENDAR CELLS STYLE
+	startDateStyle: () => {
+		return {};
+	},
+
+	endDateStyle: () => {
+		return {};
+	},
+
+	inBetweenStyle: () => {
+		return {};
+	},
+
+	normalCellStyle: () => {
+		return {};
+	},
+
+	hoverCellStyle: between => {
+		return {};
+	},
+
+	greyCellStyle: () => {
+		return {};
+	},
+
+	invalidStyle: () => {
+		return {};
+	}
+};
+```
+
+![Colors styles](https://raw.githubusercontent.com/andreaci/react-datetimepicker/master/public/images/colors-styles.png)
 
 ## Getting Started
 
+This is the base example. Please check Wrapper.jsx for more examples.
+
 ```js
-import React from 'react';
-import DateTimeRangeContainer from 'react-advanced-datetimerange-picker'
-import {FormControl} from 'react-bootstrap'
-import moment from "moment"
-
-class Wrapper extends React.Component {
-
-    constructor(props){
-        super(props);
-        let now = new Date();
-        let start = moment(new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0,0,0,0));
-        let end = moment(start).add(1, "days").subtract(1, "seconds");
-        this.state = {
-            start : start,
-            end : end
-        }
-
-        this.applyCallback = this.applyCallback.bind(this);
-    }
-
-    applyCallback(startDate, endDate){
-        this.setState({
-                start: startDate,
-                end : endDate
-            }
-        )
-    }
-
-    render(){
-            let now = new Date();
-            let start = moment(new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0,0,0,0));
-            let end = moment(start).add(1, "days").subtract(1, "seconds");
-            let ranges = {
-                "Today Only": [moment(start), moment(end)],
-                "Yesterday Only": [moment(start).subtract(1, "days"), moment(end).subtract(1, "days")],
-                "3 Days": [moment(start).subtract(3, "days"), moment(end)]
-            }
-            let local = {
-                "format":"DD-MM-YYYY HH:mm",
-                "sundayFirst" : false
-            }
-            let maxDate = moment(start).add(24, "hour")
-            return(
-                <div>
-                    <DateTimeRangeContainer 
-                        ranges={ranges}
-                        start={this.state.start}
-                        end={this.state.end}
-                        local={local}
-                        maxDate={maxDate}
-                        applyCallback={this.applyCallback}
-                    >    
-                        <FormControl
-                        id="formControlsTextB"
-                        type="text"
-                        label="Text"
-                        placeholder="Enter text"
-                        /> 
-                    </DateTimeRangeContainer>
-                </div>
-            );
-        }
+import React, { Component } from 'react';
+import { DateTimeRangeComponent } from './lib';
+import moment from 'moment';
+
+export default class DemoBase extends Component {
+	constructor(props) {
+		super(props);
+
+		let now = new Date();
+		let start = moment(new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0));
+		let end = moment(start)
+			.add(1, 'days')
+			.subtract(1, 'seconds');
+
+		this.state = {
+			start: start,
+			end: end
+		};
+
+		this.applyCallback = this.applyCallback.bind(this);
+	}
+
+	applyCallback(startDate, endDate) {
+		this.setState({
+			start: startDate,
+			end: endDate
+		});
+	}
+
+	render() {
+		return (
+			<div>
+				<DateTimeRangeComponent start={this.state.start} end={this.state.end} applyCallback={this.applyCallback} />
+			</div>
+		);
+	}
 }
 ```
 
-
 ## Available Scripts
 
 In the project directory, you can run:
@@ -168,9 +268,16 @@ See the section about [running tests](https://facebook.github.io/create-react-ap
 
 ### `npm run build`
 
+### `npm run build-win`
+
 Builds the app for production to the `build` folder.<br>
 It correctly bundles React in production mode and optimizes the build for the best performance.
+the -win version is obviously for windows.
+
+### `npm package`
+
+Create .tgz package
 
 ### npm test -- --coverage
 
-Gets test coverage when running tests to see how much of the code is covered by your tests.
+Gets test coverage when running tests to see how much of the code is covered by your tests.