FilterDate: Only current month shown on the Calendar

[komlanvi]

Hi,

I wanted to make the user able to only pick a date in the current month shown on the Calendar. I have been able to do this by defining the function passed to filterDate as this:

Is there another way to get the current month shown on the Calendar than this this.refs.datePicker.refs.calendar.refs.instance.state.date ?

[rafeememon]

Why not pass in minDate and maxDate to be the beginning and the end of the month in question?

[komlanvi]

Your suggestion work when the user can't change the month like in the example on the main website.

But in my case the user must also be able to change the month. Maybe I misunderstood some point ??

[rafeememon]

What is the use case for restricting the selected day to the current month, yet also allowing changing months? Isn't this equivalent to allowing the user to select a day with no restrictions?

[rafeememon]

If you're talking about the days from the previous and next month in the monthly view, you can style the react-datepicker__day--outside-month CSS class to suit your needs, possibly with pointer-events.

[komlanvi]

Yes that's partially what I tried to explain but I did not explain myself well. The goal is to disable (not only style) the next and prev month days from the monthly view.

[amajor]

I've been able to detect which month the user is viewing by passing a function in to the onMonthChange prop for the date picker.

I initialize a state, monthBeingViewed, as 'current', then in handleMonthChange() I check to see which month is being viewed and compare it with the current month to tell where I am in the calendar, setting my state to reflect what I need to know.

So something like this:

handleMonthChange(monthBeingViewed) {
    const currentMonth = moment();
    if (monthBeingViewed.isSame(currentMonth, 'month')) {
        this.setState({ monthRelation: 'current' });
    } else if (monthBeingViewed.isAfter(currentMonth, 'month')) {
        this.setState({ monthRelation: 'future' });
    } else {
        this.setState({ monthRelation: 'past' });
    }
}

You can compare it to the current month using isBefore(), isSame(), etc.

And then in the date picker that you're rendering...

render() {
    return (
        <DatePicker
            onMonthChange={this.handleMonthChange}
        />
    );
}

[mtrabelsi]

So sad that is not included in the doc, I will have time to make a lot of contribution for this..

[martijnrusschen]

Hi @mtrabelsi, feel free to improve our documentation/readme/examples. I'd love to get some extra thoughts on this how to improve and make this developer friendly. Feel free to open a PR with updated and changes.

[mtrabelsi]

I'm able to solve this using :

       .react-datepicker__day--outside-month {
                color: transparent;
                pointer-events: none;
              }

Don't use display: none, it will break the layout ;)

here the result :

[ghost]

@mtrabelsi where does this CSS go in relation to your datepicker component, are you passing it as a className?

[mtrabelsi]

@jasonellington I use both, to style a single day based on some specific test then I use classname, but when I want to style the default layout for the Date picker ( as you can see in my screenshot ) I hook with the style names and override them with my style - pretty handy and quick to understand. But expect to do some CSS debugging to know which is the best class to Hook. ;)

[ghost]

I am using @mtrabelsi solution but needed to add "visibility: hidden" to the css property

[ghost]

@mtrabelsi how did you edit other css properties? It seems from your attached image that were able to change colors, font, selected date icon, etc... I didn't see any directions for this on the docs

[waheedsid]

@jasonellington I think he would dig in the classes from the debugger and appy styles to it, I was able to get his solution working and did not need visibility:hidden, but I still could not take out the space being taken by that transparent dates, there is lot of space at the bottom of the month. any ideas?

display:hidden would solve it but as @mtrabelsi mentioned it is breaking the layout.

[mtrabelsi]

Hey guys, I have no more access to code, but I can help if you put your code here :). I'll try to find time this weekend to make a PR. Cheers

[dmitrystril]

I'm able to solve this using :

       .react-datepicker__day--outside-month {
                color: transparent;
                pointer-events: none;
              }

Don't use display: none, it will break the layout ;)

here the result :

Or just set visibility: hidden;

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[YASHWANTH272000]

I can solve this by using this code :

.react-datepicker__day--outside-month { color:rgb(203,203,203); pointer-events: none; }