Limit Bootstrap DatePicker to 30 Days

Question

I have, on my application two datepickers, StartDate and EndDate. I would like to set a limit of 30 days, because the amout of data in a bigger range will be huge and the application will freeze.

I would like something like: If user select on the startDate today, on the endDate will apear only, the 30 days next. But if the user choose today on the endDate, enable only the 30 past days.

My Code:

   $('#data_1 .input-group.date').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true,
            language: 'pt-BR'
        });

        $('#data_2 .input-group.date').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true,
            language: 'pt-BR'
        });

http://stackoverflow.com/questions/11933173/how-to-restrict-the-selectable-date-ranges-in-bootstrap-datepicker — DinoMyte, Mar 21 '16 at 23:10
DinoMyte, i need a dinamic Limit. The user could select on startDate: 01-01-2012 then, the endDate, will enable until 01-02-2012. User can select whatever date want, but on the 30 days interval. He also could choose endDate before the startDate, and dinamically the startDate enable only 30 dyas past. — Rogerio Azevedo, Mar 21 '16 at 23:20
you will have to set javascript event handlers in both start and end date pickers to limit the dates dynamically on each other. If it is a form, do it in validation before submission. — Ja8zyjits, Mar 22 '16 at 11:59

score 0 · Accepted Answer · answered Apr 13 '16 at 15:24

I solve my problem this way... On button click

var data1 = $('#data1').val();
var data2 = $('#data2').val();

 var umDia = 24 * 60 * 60 * 1000; // horas*minutos*segundos*milisegundos 
 var dias = Math.round(Math.abs((toDate(data1.substr(0, 10)).getTime() - toDate(data2.substr(0, 10)).getTime()) / (umDia)));

So, I did a condicional like:

if (dias < 31)
    {
        $.ajax({
            url: '/Portaria/AtendOperador',
            dataType: "json",
            type: "GET",
            data: { 'data1': data1, 'data2': data2, 'evento': evento, 'cuc': cuc, 'conta': conta },
            async: false,
            cache: false,
            delay: 15,
            success: function (data) {

Limit Bootstrap DatePicker to 30 Days

1 Answers1