MC Date Picker

A two month view datepicker component (one month view on mobile). View a working demo here.

!mc-datepicker-screenshot

Getting Started

$3

``
npm install mc-react-datepicker --save
`

$3

Once the datepicker is in the node_modules folder, you can import it on your page and render it with an optional userConfig object passed in, as explained below.

Import the datepicker:
`javascript
import McReactDatepicker from 'mc-react-datepicker';
`

Render the datepicker with (optional) userConfig object):
`javascript

`

$3

Both the compiled CSS and raw SASS files are available for you to use depending on which you prefer in your setup.

datepicker.css

datepicker.scss

User configuration object

The datepicker accepts an optional user configuration object with the following properties explained.

$3

Type: String

Default: "Start date"

Description:
The text that appears in the input field for the start date, when a date has not yet been selected

Example:
`javascript
selectedStartDefaultString : "Check In",
`

$3

Type: String

Default: "End date"

Description:
The text that appears in the input field for the end date, when a date has not yet been selected

Example:
`javascript
selectedEndDefaultString : "Check Out",
`

$3

Type: Array

Default: null

Description:
Disabled date ranges. Each item in the array should be an object with two properties 'firstDay' and 'lastDay' with date objects as the values.

Example:
`javascript
disabledDays : [
{
firstDay : new Date("October 16, 2016"),
lastDay : new Date("October 19, 2016")
},
{
firstDay : new Date("December 4, 2016"),
lastDay : new Date("December 4, 2016"),
}
]
`

$3

Type: Object

Default: (various classes)

Description:
Adding classes to the main elements, using the properties: 'datepicker', 'dateInputsWrapper', 'dateInput', 'dateInputStart', 'dateInputEnd', 'calendarWrapper', 'calendar'.
You can also add more than one class by adding a gap between in the string.

Example:
`javascript
classNames : {
datepicker: "my-datepicker my-datepicker-one",
dateInputsWrapper: "date-inputs-wrapper",
dateInput: "date-input",
dateInputStart: "date-input-start",
dateInputEnd: "date-input-end",
calendarWrapper: "my-calendar-wrapper",
calendar: "my-calendar"
}
`

$3

Type: Object

Default: (various colours: "#565a5c", "#66e2da", "#99ede6", "#00a699")

Description:
Colour theming for the input field active states, the selected days and inbetween days.
The two nested objects are 'inputs' and 'days' which contain properties that accept a string colour value.

Example:
`javascript
theme : {
inputs : {
activeBackgroundColor: "#ffcccc",
activeColor: "#565a5c"
},
days : {
selectedBackgroundColor: "#ff4d4d",
inbetweenBackgroundColor: "#ffcccc",
}
}
`

Full example

The example below shows the datepicker fully configured.

`javascript
import React from 'react';
import McReactDatepicker from 'mc-react-datepicker';

var App = React.createClass({

render : function() {
var config = {
selectedStartDefaultString : "Start date",
selectedEndDefaultString : "End date",
disabledDays : [
{
firstDay : new Date("October 16, 2016"),
lastDay : new Date("October 19, 2016")
},
{
firstDay : new Date("December 4, 2016"),
lastDay : new Date("December 4, 2016"),
}
],
classNames : {
datepicker: "my-datepicker my-datepicker-one",
dateInputsWrapper: "date-inputs-wrapper",
dateInput: "date-input",
dateInputStart: "date-input-start",
dateInputEnd: "date-input-end",
calendarWrapper: "my-calendar-wrapper",
calendar: "my-calendar"
},
theme : {
inputs : {
activeBackgroundColor: "#ffcccc",
activeColor: "#565a5c"
},
days : {
selectedBackgroundColor:"#ff4d4d",
inbetweenBackgroundColor: "#ffcccc",
}
}
}

return (

)
}
});

export default App;
``

MC Datepicker built by Matine Chabrier matine.co.uk