Is there any chance you could include the CSS from the demo page (http://onefinestay.github.io/react-daterange-picker/) as part of what's published on NPM?

(In reference to the CSS in the demo page)

Updating both minimumDate and maximumDate props fails to set new limits. Updating only one or other works as expected.

I added in some debug console.logs into componentWillReceiveProps function,

console.log('this.state.enabledRange', this.state.enabledRange.toString());
console.log('nextEnabledRange', nextEnabledRange.toString());
console.log('Immutable.is', _immutable2['default'].is(this.state.enabledRange, nextEnabledRange));
console.log('range.isSame', this.state.enabledRange.isSame(nextEnabledRange));

Console output

this.state.enabledRange 2015-06-29T00:00:00+01:00/2015-07-13T00:00:00+01:00
nextEnabledRange 2015-07-06T00:00:00+01:00/2015-07-20T00:00:00+01:00
Immutable.is true
range.isSame false

It looks like Immutable.is is giving a false positive that these two objects are the same - it can be seen that the date ranges are different. Given that this is comparing moment-range objects, rather than objects created by Immutable itself, is this working as expected?

Instead, would it be better to rely on the isSame function from the moment-range to compare the two?
Changing from Immutable.is to enabledRange.isSame solves the problem for me.

Once 0.12.2 is released (#91) we should merge #79 and support React 0.14.x.
I feel that as part of this release we should update our version to 1.0.0, following semver semantics.

/cc @AndrewIngram @jkimbo Could you please review, merge and release as appropriate, as I do not have the permissions to do so.

The css of the start date is missing when setting the range value as default state.

The value range is a moment-range object.

Current master (e8e7f86) reflects the work involved in a 0.12.2 release.

The main change involved in this release is locking down our peer dependency version of react to ^0.12.0 || ^0.13.0

/cc @AndrewIngram @jkimbo Could you please review and release as appropriate, as I do not have the permissions to do so.

@AndrewIngram What do you think about book per block of 2 weeks or 1 month for example ?

Is there an event to listen to changes made by user in range picker's UI?
For example I would like to know when user changes month - I want to render some additional info related with that month.

And I'm not talking about selection - this happens before user selects anything.
I checked the source code and I don't see that event but maybe I'm missing something.

on https://github.com/onefinestay/react-daterange-picker/blob/master/src/DateRangePicker.jsx#L22

React.initializeTouchEvents(true);

is called

with React v 0.14

React.initializeTouchEvents is no longer necessary and has been removed completely. 
Touch events now work automatically.

I am trying to change the locale, but I can't figure it out.

In my own code:

var moment = require('moment');
require('moment/locale/de');
moment.locale('de');

works just fine for my own moment() code. However, this never affects the datepicker.

When I go into a debugger in CalenderMonth.js, moment.locale() always returns "en". Changing it to "de" right there has no effect either; I am wondering if there is some confusion about "moment" and "moment-range", and that my "de" locale is never available in the right place.

Any ideas?

It would be great if you could allow both single and range selection. Based on the examples, they seem to be mutually exclusive right now. Is that true?

This is what I get on "gulp build-example-js":

ERROR in ./example/js/index.js
Module build failed: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
at Parser.pp.raise

Initial data and result

dateRanges: [{
        state: "enquire",
        range: moment.range(
            moment().add(2, "weeks").subtract(5, "days"),
            moment().add(2, "weeks").add(6, "days")
        )
    },
    {
        state: "unavailable",
        range: moment.range(
            moment().add(3, "weeks"),
            moment().add(3, "weeks").add(5, "days")
        )
    }
  ]

Data and result after modification

dateRanges: [{
        state: "enquire",
        range: moment.range(
            moment().add(2, "weeks").subtract(5, "days"),
            moment().add(2, "weeks").add(6, "days")
        )
    },
    {
        state: "unavailable",
        range: moment.range(
            moment().add(3, "weeks"),
            moment().add(3, "weeks").add(5, "days")
        )
    },
    {
        state: "unavailable",
        range: moment.range(
            moment().add(3, "days"),
            moment().add(5, "days")
        )
    }
  ]

TypeError: undefined is not a function
    at [object Object].getEnabledRange (/src/node_modules/react-daterange-picker/dist/DateRangePicker.js:183:32)
    at [object Object].getInitialState (/src/node_modules/react-daterange-picker/dist/DateRangePicker.js:174:26)
    at new Constructor (/src/node_modules/react/lib/ReactClass.js:853:54)
    at [object Object].ReactCompositeComponentMixin.mountComponent (/src/node_modules/react/lib/ReactCompositeComponent.js:135:16)
    at Object.ReactReconciler.mountComponent (/src/node_modules/react/lib/ReactReconciler.js:38:35)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/src/node_modules/react/lib/ReactMultiChild.js:192:44)
    at ReactDOMComponent.Mixin._createContentMarkup (/src/node_modules/react/lib/ReactDOMComponent.js:289:32)
    at ReactDOMComponent.Mixin.mountComponent (/src/node_modules/react/lib/ReactDOMComponent.js:199:12)
    at Object.ReactReconciler.mountComponent (/src/node_modules/react/lib/ReactReconciler.js:38:35)
    at [object Object].ReactCompositeComponentMixin.mountComponent (/src/node_modules/react/lib/ReactCompositeComponent.js:247:34)

Im getting this error , on my production , server .
Env
Running on Ubunut 14 Docker Ubuntu 14.
Node ver 12.4
React 13 .
NODE_ENV=production ,
NODE_PATH=./src.
babbel.js

i have no clue , what is the problem. some how moment-range module doesn't have .range fn .

 inside getEnabledRange() , moment obj doesnt have .range fn 

on my dev machine everything works as expected

Is there a way to highlight current date?

it's possible? :)

I am getting an error Object.assign is undefined from BemMixin.js. I am using it in my code by doing an npm install and then bundling it using webpack. Am I missing something here? My chrome version is Version 41.0.2272.89 (64-bit)

To recreate:

• Open demo page and go to the first example (where Sunday is the first day of the week, which is key to recreating the bug)
• Page through the calendars so that Oct 2015 is the first calendar
• Pick any date in Oct as the start date
• Drag the range until you are hovering over Nov 1 (should be the first day on the second calendar's grid)

The date doesn't get any highlighting. If you click it as the end date, it correctly recognizes it but the CSS is never applied. Same thing happens under similar circumstances. See, for example, Jan-Feb 2016 on the first calendar on the demo page (where Mon is the start of the week).

Uncaught Error: Invariant Violation: You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side.

Let's update travis to also run the linting rules as part of the CI process

Hello,

how to disable HalfDateStates class? i want to FullDateStates in my dateStates

Annoyingly, Windows Mobile triggers both touch and mouse events which kinda messes everything up. It's possible that devices like the Microsoft Surface have similar issues. Not sure if this is just a browserstack issue, it might be triggering both types of events to cover all bases.

If anyone has access to a Windows Mobile device and would like to check, that'd be great

A sliding effect would be super nice

A month can have a range of weeks, from 4-6 depending on start date. It can be a little jarring that the height of the calendar table can vary as your paginate. Instead we should (optionally?) pad out all months to 6 weeks so that the heights remain the same.

Is it possible to select multiple dates (not a range) with the date picker?

Examples:
May 31th, 2014

{
    firstOfWeek: 0
    value: moment.range(moment(1401483600000).startOf("day"), moment(1401483600000).add(2, "days"))
}

November 30th, 2014

{
    firstOfWeek: 1
    value: moment.range(moment(1412024400000).startOf("day"), moment(1412024400000).add(2, "days"))
}

Looking into the code, moment ranges do not overlap in these cases despite month.end.valueOf() == value.start.valueOf().
See moment.range issue

Pull request with a fix is coming soon

This plugin doesn't work with react 13.0. I need the latest version for some updated mixins, but cannot use this component

I'm working on something to allow user to select date ranges including half days, for example, an employee can choose on vacation from afternoon, or asking for leave for a half day, is that possible?

We are no longer using this project in production at onefinestay so it's becoming hard to maintain it. Rather than just let the project decay I would like to add some more people as maintainers so that they can take the project wherever they see fit! Is anyone up for it?

cc. @moimikey @AlanFoster @HelenDea @nicolassenechal @ckald @Maxim-Filimonov @miracle2k

Once #72 is merged, we should have Travis running as our CI. This will also help provide the certainty that the React 0.14.x upgrade is working as expected too

Unfortunately I don't have Admin rights for this currently; Could we enable this please -

/cc @AndrewIngram @jkimbo

This is used in the examples, but it seems it is not actually implemented.

Loving the library, but a bit frustrated with the lack of docs in a 1.0.0 release. I'll be happy to help, but I'm new to the library and its going to take a while to pick through the code and figure out how everything works.

Is there an inbuilt method for Show/Hide calendar?

Is there a way to focus (display by default) a particular month? I tried the initialDate and initialMonth prop and it does not seem to work. I am not sure whether I am doing it the right way. Is there any known issue?

moment-range is now on v2.x - but react-daterange-picker is capped at ^1.2.0

It would be good to upgrade this dependency

I'm trying to set up DatePicker but I'm getting tons of warnings in console

Warning: owner-based and parent-based contexts differ (values: `undefined` vs `DateRangePicker`) for key (bemBlock) while mounting PaginationArrow

Warning: owner-based and parent-based contexts differ (values: `undefined` vs `null`) for key (bemNamespace) while mounting PaginationArrow

I figured out that problem is in BemMixin
Somehow context wasn't transferred to child components

At the moment we have a hidden feature where dragging a selection over the next/previous arrows will trigger pagination. We need to make this more obvious, and pretty.

Having the following component I get Uncaught TypeError: Cannot read property 'add' of undefined which points to moment().add(2, 'weeks').subtract(5, 'days')

import React from 'react/addons';
import DateRangePicker from 'react-daterange-picker';
import moment from 'moment-range';
import mui from 'material-ui';
import injectTapEventPlugin from 'react-tap-event-plugin';

// Get mui Components
let ThemeManager = new mui.Styles.ThemeManager();
const stateDefinitions = {
  available: {
    color: null,
    label: 'Available',
  },
  enquire: {
    color: '#ffd200',
    label: 'Enquire',
  },
  unavailable: {
    selectable: false,
    color: '#78818b',
    label: 'Unavailable',
  },
};

const dateRanges = [
  {
    state: 'enquire',
    range: moment.range(
      moment().add(2, 'weeks').subtract(5, 'days'),
      moment().add(2, 'weeks').add(6, 'days')
    ),
  },
  {
    state: 'unavailable',
    range: moment.range(
      moment().add(3, 'weeks'),
      moment().add(3, 'weeks').add(5, 'days')
    ),
  },
];
class Appointments extends React.Component {

    /*static willTransitionTo(transition) {
        //go to login page
        transition.redirect('/login');
    }*/

    constructor(props) {
        super(props);
        this.state = {value: null };
    }

    handleSelect(range, states) {
        // range is a moment-range object
        this.setState({
            value: range,
            states: states,
        });
    }

    render() {

        return (
            <DateRangePicker
                firstOfWeek={1}
                numberOfCalendars={2}
                selectionType='range'
                earliestDate={new Date()}
                stateDefinitions={stateDefinitions}
                dateStates={dateRanges}
                defaultState="available"
                showLegend={true}
                value={this.state.value}
                onSelect={this.handleSelect} />
                );
    }

}

 Appointments.childContextTypes = {
  muiTheme: React.PropTypes.object
};


Appointments.contextTypes = {
  router: React.PropTypes.func
};

export default Appointments;

There should be some quick wins here by implementing shouldComponentUpdate on the Date components so that only the affected date needs to re-render.

Related: #31

I'm getting uncaught error in moment-range.js in demo or when I'm trying to use module
Uncaught TypeError: Cannot read property 'length' of undefined

Apparently moment-range higher than 1.0.9 causes this error

Could it be possible to select a single day ?
Perhaps by clicking on a day, and then clicking on the same day to end the selection ?

What do you think ?

Anyway, thanks for this awesome picker !

I get this error after reinstall npm module.

Hi,

Can we make it possible to hide selectedLabel? When I using the calendar just to show dates available / unavailable and set selectable to false, I still get the selectedLabel.

Here is a fix. (I'm new to contributing to repos and had problems to run "npm run lint" and "npm run test")

bookingbricks@cc3aa61

Thanks for a nice component btw, exactly what I looking for.