If a moment date is passed for startDate or endDate to DateRange the following warning will be shown in the console.

Warning: Failed propType: Invalid prop startDate supplied to DateRange.

I committed code. But why am not I a contributor?

点击叉之后，组建的值为null或者“”

This can be seen in the first example at http://adphorus.github.io/react-date-range/. The December calendar should show the last day of November as Monday the 30th.

Hi,

I needed to have some color indication on the today day cell,
I noticed that only the today day cell has a "undefined" className so I added some css selectors,
It works fine but.. I'm guessing that's a bug and it will not stay that way in future versions.

Is there any elegant way of custom theming only the current day cell than this one?
And thanks you all for a useful component.
Cheers :)

It would be helpful to be able to be able to identify the start and end edges of a range in a calendar to allow for more flexibility in range styling.

Great repo first off! 😄
Just wondering if there is support for highlighting the range of dates from the selected startDate to before actually selecting endDate.

Example:
I select 16th as startDate
I hover over to 20th and there is a range 'light highlight' from 17th to 20th
I move over to 22nd and the range 'light highlight' extends to 22nd
I click on 22nd as endDate and the range gets the current implementation of 'dark highlight'

I think the library itself is in an enough condition to release 1.0. But before doing so; we need to complete and organize the documentation. @strada @fatiherikli mayday :)

Hey,

It would be nice if you could provide an api option to change language.

Now I am hard coding it manually in Calendar.js, like this _moment.locale('zh-cn').

But this does no good for team development, if my project has new team members, they would also have to add a line like this.

Also, the format api doesn't seem to work for me.

import React, { Component } from 'react';
import { DateRange } from 'react-date-range';

class MyComponent extends Component {
    handleSelect(range){
        // intuitively, I think here would log out dates in the set format,
        console.log(range);
        // but turns out I still need to do something like this
        // to get the right format dates
        // or did I set the format in a wrong way in the props?? 
        let startDate = range.startDate.format('YYYY-MM-DD') 
        console.log(startDate);
    }

    render(){
        return (
            <div>
                <DateRange
                    onInit={this.handleSelect}
                    onChange={this.handleSelect}
                    format={ 'YYYY-MM-DD' }  // set format here
                />
            </div>
        )
    }
}

@mattfurness @Jador
the 0.2.0 milestone is done 🎊 , but needs to be tested(manually) before the release since there are a lot of new features bundled in.

We also need to update the readme.
thanks for your efforts 💯

How change to other language?
Moment.js has the locale method, but how to change language in react-date-range?

I have a design like this

When use moment update locale. Everything working well. But the weekdaysMin you use as the React key, so i got the duplicate key problem S (Sunday) - S (Saturday), T (Tuesday) - T (Thursday).

moment.updateLocale('en', {
      months: [
        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
        'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ],
      weekdaysMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
    });

Could you replace the key with loop index. I think it's better.

Line 130 - 131 of Calendar.js

    for (let i = dow; i < 7 + dow; i++) {
      const day = moment.weekdaysMin(i);

      weekdays.push(
        <span style={onlyClasses ? undefined : styles['Weekday']} className={classes.weekDay} key={day}>{day}</span>
      );
    }

Thanks and best regards!

I wonder if I want to customize default range, I want to add last 60 days or something like that.
How to do that?

Thank you...

Hey,

is the separate theming and disabling of selection of the days after today possible?
I.e. I need to deny choosing of day after today and I want to make it look disabled.

I'm testing in Firefox on Xubuntu, and it looks like the calendar width is just a touch too small to render all seven days in a row.

Screenshot of problem:

It would be useful to be able to supply min and max dates to date ranges and calendars so that any dates that fall outside the min and max range could appear as passive dates.

This looks amazing! Are there any plans to package the date range picker in a button/pop-up format like here: https://github.com/skratchdot/react-bootstrap-daterangepicker?

Is there any chance to define no default value when displaying calendar? I want to use this plugin only for selecting ranges, but I want to display only blank calendars by default after first render.

Hello,

is it possible to set DateRange as readOnly mode ?

thank

Is there a simple way in the theme object to make this calendar easily responsive?

screenshots:

I know it probably makes little sense since a date picker is for picking, ahem, dates and not date-times. However, I'm already using react-date-range and I've been asked to provide some predefined links that (instead of just selecting "Today" or "Yesterday"), allow for easy selection of "Last 24h", "Last 48h" and the like.

As far as I could see, the use of startOf('day') across the codebase prevents such time spans from being selected with the component as it currently stands.

Have you got any ideas as to how I could add that functionality without tampering with the widget?

Would you consider adding the ability to select non-start-of-the-day timestamps with a flag (something like an allowNonFullDays prop) if I decided to implement it?

Hi there,

Thanks for this great component! Installed it yesterday, and fit right in.

One thing I noticed was that when selecting a date range via the presets, the calendars might become out of sync. That is, the start date might actually be out of bounds of the left calendar. Is there a way to make sure both the start and end dates are always visible?

Thanks,

Alexis

Would be nice if the widget would also have selectors for hours and minutes.

The title says it all. Is it possible to link this to an input field, so when clicked, the date range picker pops up?

Hi thanks for the help.

I have 2 inputs and I'd like that when I click the first one it edits the startDate, and when I click the second one It edits the endDate.

Is there a way to achieve that?

I noticed as part of v2.0, min and max props were added but the documentation wasn't updated to show this.

Just thought I'd put a note in as it may be useful to a lot of people and with the documentation not containing these changes, it may have went unnoticed.

The current version on NPM is 0.9.0, yet the latest tagged release is 0.2.4.

A user shouldn't have to sift through commits to figure out what changed. Especially when the module in question jumps up 7 minor versions.

Could you please consider maintaining a changelog?

I have selected a range and now I want to reset it. How can I do that? Is there any option for it?

It would be great if we could define a disabled date range, like http://amsul.ca/pickadate.js/date/#disable-dates

$('.datepicker').pickadate({
  disable: [
    { from: [2016,2,14], to: [2016,2,27] }
  ]
})

I would like to force users to select dates within a pre-defined date range.

I don't see anyway to quickly select a different year.

I know some date pickers are setup so that when you click the date above the calendar it shows the months. then if you click the top of the calendar again it shows the last 10 year, clicking it again then shows you the last ten decades. Here is an example: https://eonasdan.github.io/bootstrap-datetimepicker/

Except for that, this is a fantastic component!

It would be useful to be able to be able to identify and style todays date, so that users of the date picker can quickly and easily identify today.

Is it really necessary to use GPL as a license? Right now every application that uses this component would need to be open sourced. As much as I love open source, this isn't always possible.

How about switching to the MIT license?

When I include and afterwards change x or y in the parent component, DateRange is not updated.

This is because DateRange doesn't use the props directly, but parses them and puts them into state, and this is only done in the constructor, and then never again.

Let's say I have the "Range Picker (Predefined Ranges)" example on the Examples page. Instead of Last 30 days, I define a range called "Last 6 Months". When I use it, the right calendar goes to today's date and the left calendar gets completely highlighted since it is within the last 6 months range.

This doesn't actually show the user what start date was selected since it isn't on the left calendar. It's several months before it.

When updating either calendar, it should automatically go to the month and year that was selected. There is no way to link a calendar to initially showing its selected day/date.

Another possible example of this is a predefined range for a set of specific dates in the past or future. For example I could have a predefined range called "Summer (2015)" which has a start date of July 1, 2015 and an end date of August 30, 2015. The date range picker should allow for some way to show those two dates highlighted in both of the calendars shown in my date range control.

Image:

This is how it looks when your start date is not on the two displayed calendars. The current calendars do not automatically move to their selected date when that date is first selected.

each week has only 6 days.
only in firfox like this.

In https://github.com/Adphorus/react-date-range/blob/master/src/DayCell.js#L87-L89, there are class names for isStartEdge, isEndEdge, isToday, but when my calendar renders, I don't see any of these class names in the markup. Should I? I suspect I should because on today's span, there's a class name of undefined (see image below) which I assume should be isToday. I can dig into this more to find the problem, but wanted to check before I did so.

Thinking in terms of an enhancement. It would make sense as the onChange event fires on change of any value but when picking a range, having an apply event seems more suitable.

I use DateRange component for my Date Range Picker and i try to specify style for day in range using DayInRange property in thema, and styles are applied. But after hovering mouse to this days styles become default value.
I will add code snapshot on Monday.

Is it possible to make the inner components able to be styled without having to resort to inline styles?

<DatePicker startDate={this.props.startDate} endDate={this.props.endDate} />

It would be better if we navigate the calendar to display the corresponding selected date.

So, maybe this isn't the right way to do this so if it isn't, please correct me.

import * as React from "react";
import { render } from "react-dom";
import { DateRange } from "react-date-range";

interface IMyComponentState {
  startDate: Date;
  endDate: Date;
} 

class MyComponent extends React.Component<{}, {}> {
  state: IMyComponentState;

  constructor() {
    super();

    this.state = {
      startDate: new Date(),
      endDate: new Date(),
    };

    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(dates) {
    console.log(dates);

    this.setState({
      startDate: dates.startDate,
      endDate: dates.endDate, 
    });
  }
  render() {
    return (
      <div>
        <DateRange
          startDate={this.state.startDate}
          endDate={this.state.endDate}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

render(<MyComponent />, document.getElementById("app"));

I figured I could pass in dates from my state. However, when I do this, clicking on dates causes the onChange to fire twice.

I figure it's because I noticed that the onChange fires both from an onClick AND from a willReceiveProps.

Has anyone ran into this before? I'm trying to figure out how else to maintain the currently selected dates in state so that when I close and open the calendar in my UI, it'll maintain the selected dates.

Thanks!

Might be a good idea to add some unit testing.

@burakcan any preference on framework?

Please tag releases, which makes it easier to see what has changed between the versions that have been published at npm

when i use the DateRange component with the property range , the browser show the error 'Uncaught ReferenceError: onlyClasses is not defined' .

i find the code in PredefinedRanges.js , line 57-83 . when i add the variate onlyClasses which is read from this.props , the component render successfully. thanks!

Hi there. I upgraded from 0.2.2 to 0.2.3 and I'm getting the following error:

Uncaught ReferenceError: onlyClasses is not defined

Uncaught ReferenceError: onlyClasses is not defined(anonymous function) @ PredefinedRanges.js?
23ea:77renderRangeList @ PredefinedRanges.js?23ea:66render @ PredefinedRanges.js?
...

Any ideas?

For the end date, date picker now gets the datetime as "YY/MM/DD 00:00:00" and I was thinking this might be better if it was "YY/MM/DD 23:59:59" so we include the entire last day with respect to time too. In use cases where time also matters along with the date (which is something I'm working on), this could be very useful. Also, we could probably also have a property inclusive? That would include or exclude start and end dates.
I will work on this and submit a pull request soon, unless people think this would not be of any use.