CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatepicker
user774715
user774715

Reputation: 129

Bootstrap daterangepicker selected start date + 30 days as maxDate

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.

Upvotes: 4

Views: 19408

Answers (5)

Nikunj Shrimali
Nikunj Shrimali

Reputation: 11

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

Upvotes: 1

Bharat chaudhari
Bharat chaudhari

Reputation: 534

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

Upvotes: 0

gotosachin
gotosachin

Reputation: 109

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.

Upvotes: 0

user1211577
user1211577

Reputation:

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

Upvotes: 4

Roydon D' Souza
Roydon D' Souza

Reputation: 425

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.

Upvotes: 2

Related Questions