Bootstrap daterangepicker selected start date + 30 days as maxDate

Question

I was wondering if someone could help me. Using the Dan Grossman's Bootstrap Date Picker I want to add 30 days onto the selected start date and define that as the maxDate so a user can't select past this date.

I'm really stuck on this and I can't find any docummentation relating to what I want to do. Here is my code;

var min_date = new Date();
var max_date = '05/31/2013';

$('#limited').daterangepicker(
{
    minDate: min_date,
    maxDate: max_date,
},
function(start, end) {
    $('#limited')
        .data("showAddEventDialogue_dateRangeStart", start)
        .data("showAddEventDialogue_dateRangeEnd", end);
});

Any help or advice would be very much appreciated.

Thanks a million.

I haven't used this module, however I can see you use a date object for minDate and a string for maxDate. Have you tried to do it like this: `var min_date = max_date = new Date(); max_date.setDate(max_date.getDate() + 30);` — thebreiflabb, May 10 '13 at 09:08

score 4 · Answer 1 · answered May 10 '13 at 10:36

4

It seems that the plugin only accepts a specific date format for minDate and maxDate, which is mm/dd/yyyy.

Just using new Date(); unfortunately doesn't work, as it returns the full date, which is incorrect in format.

The code below seems to work for me, it will use always use today as min and +30 as max.

/* Get the code into mm/dd/yyyy format */
function getFormatDate(d){
    return d.getMonth()+1 + '/' + d.getDate() + '/' + d.getFullYear()
}

$(document).ready(function() {
    var minDate = getFormatDate(new Date()),
    mdTemp = new Date(),
    maxDate = getFormatDate(new Date(mdTemp.setDate(mdTemp.getDate() + 30)));

    $('#daterange').daterangepicker(
    {
       minDate: minDate,
       maxDate: maxDate
    }
    );
});

answered May 10 '13 at 10:36

Thanks for this. I need it to add 30 days based on the users selected start date rather than 30 days from today! – user774715 May 10 '13 at 11:38
There is no standard, seriously. It accepts "mm/dd/yy", which in .NET is "MM/dd/yyyy", and in moment.js is moment().format('MM/DD/YYYY'). They all seem to use different variations on capitalization. Meanwhile, moment accepts only ISO date format ('YYYY-MM-DD'), while the datetimepicker (which USES MOMENT) expects a moment instance for some fields, but apparently a string of format 'mm/dd/yyyy' (actually moment.format('MM/DD/YYYY') for the min/max values? This is insane, and why Flash will never die until the web gets its $hit together. – Triynko Jul 21 '15 at 18:34

score 2 · Answer 2 · edited May 23 '17 at 12:14

2

As thebrieflabb has mentioned in his comment you can solve this problem as follows:

var endDate = new Date();
endDate.setDate(startDate .getDate()+30);

You can find more your solution in this thread.

Hope this helped.

edited May 23 '17 at 12:14

Community

1
1

answered May 10 '13 at 10:31

Roydon D' Souza

425
1
7
23

Thanks for this. I need it to add 30 days based on the users selected start date rather than 30 days from today! – user774715 May 10 '13 at 11:37

score 1 · Answer 3 · edited Jan 13 '22 at 14:23

1

Date = new Date(),
maxDate = new Date(Date.setDate(Date.getDate() + 30)),
$('#daterange').daterangepicker({
    minDate: new Date(), 
    maxDate: maxDate ,
    locale: {
       format: 'DD-MM-YYYY',
       firstDay: 1
    },
});

edited Jan 13 '22 at 14:23

Elikill58

4,050
24
23
45

answered Jan 13 '22 at 12:12

Nikunj Shrimali

11
1

score 0 · Answer 4 · answered May 26 '16 at 18:16

0

You can use like this:

var date2 = new Date();
date2.setDate(date2.getDate()-1);
console.log(date2);
$('#daterange').daterangepicker({
    showDropdowns: false,
    format:'MM/DD/YYYY',
    maxDate:date2,
    autoclose: true,
    autoApply:true,

});

Hope it will help anyone.

answered May 26 '16 at 18:16

gotosachin

111
1
3

It doesn't work apparently, the calendar will become NaN – jefferyleo Aug 12 '21 at 08:54

score 0 · Answer 5 · edited Nov 06 '18 at 10:35

You need set maxDate and minDate like below : you should store in variable then use it.

var prev_date = new Date();
prev_date.setDate(prev_date.getDate() - 1);

$('input[name="daterange"]').daterangepicker({
        opens: 'left',
        showDropdowns: true,
        autoUpdateInput: false,
        maxDate: prev_date,
        locale: {
            cancelLabel: 'Clear',
            format: 'MMM DD, YYYY'
        }
    });

and if u want to allow user to select prev dates only
ex. Date of birth u can use this prop.
startDate : prev_date

Bootstrap daterangepicker selected start date + 30 days as maxDate

5 Answers5