引导 daterangepicker 选择开始日期 + 30 天作为 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.

Answer 1

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
    }
    );
});

Answer 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.

Answer 3

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
    },
});

Answer 4

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.

Answer 5

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