daterangepicker select range within one month

Question

Using this http://www.daterangepicker.com/

How to use daterangepicker to select range from only one month. Enabling singleDatePicker: true makes it onlt date picker, but I need range for one month.

i.e. for jan 1 2017 to jan 15 2017. or any range within a month.

I have tried

"dateLimit": {
    "month": 1
 },

But it select jan 1 to 31 and feb 1 also.

If not possible please suggest an alternative.

Edit (Current Code)

function cb(start, end) {
            $('#daterange span').html(start.format('MMM D, YYYY') + ' - ' + end.format('MMM D, YYYY'));

            enroll_date_start.value = start.format('YYYY-MM-DD');
            enroll_date_end.value   = end.format('YYYY-MM-DD');
        }

        $('#daterange').daterangepicker({
            maxDate: moment(),

            "dateLimit": {
                "month": 1
            },
            ranges: {
               'Today': [moment(), moment()],
               'This Month': [moment().startOf('month'), moment().endOf('month')],
               'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);

So you want to force it select only in current month. Do you? — Flardryn, Mar 15 '17 at 06:43
No, It could be any month. from January I want to select range from Jan. from Feb 1 to 28. from March 1 to 12 etc. — Abdul Rehman, Mar 15 '17 at 07:00

score 6 · Answer 1 · answered Dec 27 '17 at 11:15

6

Simply add the following in the dateLimit option.

dateLimit: {
    'months': 1,
    'days': -1
}

answered Dec 27 '17 at 11:15

Alexandros Trepeklis

161
2
7

This plugin just dosn't work the way I want. I tried your solution, But now I understand that the `months: 1` option is not what it seems. It means select 31 days from any given 2 months. I just want a single month calendar and select range from `within A month` – Abdul Rehman Dec 27 '17 at 11:35

score 4 · Answer 2 · answered Mar 19 '21 at 13:29

4

I know that I'm late but this solution works for me:

Add this line to options:

linkedCalendars: false

and them add this to the css:

.drp-calendar.right {
    display: none !important;
  }

The father class (drp-calendar in my case) could be different, check it with inspector.

Source: https://github.com/dangrossman/daterangepicker/issues/1152#issuecomment-229439154

answered Mar 19 '21 at 13:29

Alvargon

324
3
10

1

The thing is having such a basic feature and you have to do css or other hacks is IMO lame. I know its an open source project but if a provided feature is messed up I don't want to use that plugin. So I shifted and never looked back. – Abdul Rehman Mar 19 '21 at 17:09
Yeah I know, I add this solution becase in my case I wanted to see the range but without displaying both month. Is not the best way, but I'm having to edit the main js to have what I want, is very "arcane" (as complicated with no reason), because the main dev don't want to add this, in my opinion, logic features. – Alvargon Mar 25 '21 at 04:00

score 1 · Accepted Answer · answered Mar 15 '17 at 07:29

1

I found another plugin with a lot of features and the feature I needed. https://longbill.github.io/jquery-date-range-picker/

Option: Single Month Mode (with range dates)

answered Mar 15 '17 at 07:29

Abdul Rehman

1,662
3
22
36

score 0 · Answer 4 · edited Nov 20 '18 at 08:33

With this workaround I manage to have control over single month view with date range:
I use this hack: [https://stackoverflow.com/questions/41770018];

I've added + 1 month to maxDate: var maxDate = moment(new Date()).add(1, 'M');

singleDatePicker: false,
linkedCalendars: true,

I used the method on my options datepicker object;

isInvalidDate: function(date) {
    return date.isAfter(self.today);
}

Where self.today is moment(new Date()).format('M/DD/YYYY');

This solution is used for date range only past day after today date. All the dates after today will be disable

score -1 · Answer 5 · answered Jun 21 '19 at 16:43

-1

This worked for me, add the following:

singleDatePicker: true,

answered Jun 21 '19 at 16:43

Antonio Ruiz

145
7

Hi, but this will not allow you to select a range from the month, only a single date... – fraktal12 May 17 '21 at 21:40

daterangepicker select range within one month

5 Answers5