javascript - How do I get days count for selected dates by bootstrap date range picker? - Stack Overflow

admin管理员组

文章数量:1405891

I have used bootstrap daterange picker for start and end dates selection. I is working fine. But I want to add the count of days selected. My code:

$('input[name="daterange"]').daterangepicker({
    dateLimit: {
        days: 9
    },
    linkedCalendars: false,
     startDate : moment().add(1, 'days'),
     minDate: moment().add(1, 'days'),
     /*maxDate: moment().add(30, 'days'),*/
    locale: {
        format: 'MM/DD/YYYY'
    }
});

How to get the selected days count and show the days count in the shown calendar area.

I have used bootstrap daterange picker for start and end dates selection. I is working fine. But I want to add the count of days selected. My code:

$('input[name="daterange"]').daterangepicker({
    dateLimit: {
        days: 9
    },
    linkedCalendars: false,
     startDate : moment().add(1, 'days'),
     minDate: moment().add(1, 'days'),
     /*maxDate: moment().add(30, 'days'),*/
    locale: {
        format: 'MM/DD/YYYY'
    }
});

How to get the selected days count and show the days count in the shown calendar area.

• javascript
• bootstrap-daterangepicker

Share Improve this question Follow asked Nov 8, 2017 at 5:23 UndefinedUndefined 4522 silver badges88 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

Maybe this example it's helpful.

    $('input[name="daterange"]').daterangepicker({
    timePicker: true,
    timePickerIncrement: 30,
    locale: {
             format: 'MM/DD/YYYY h:mm A'
            },        
    }).on('apply.daterangepicker', function(ev, picker) {debugger
                var start = moment(picker.startDate.format('YYYY-MM-DD'));
                var end   = moment(picker.endDate.format('YYYY-MM-DD'));
                var diff = start.diff(end, 'days'); // returns correct number
                alert(diff)});

You can start with Arvind Sisara's answer then set autoApply option to true for your daterangepicker element.

Like this:

autoApply: true;

<div class="input-group">
   <div class="input-group-addon">
       <i class="fa fa-calendar"></i>
   </div>
   <input type="text" class="form-control pull-right" id="reservation">
</div>



$('#reservation').daterangepicker().change(function () {

        var daterange = $('#reservation').val().split('-')

        var start =new Date(daterange[0]);
        var end =new Date(daterange[1]);

        var diff = new Date(end - start);

        var days = diff / 1000 / 60 / 60 / 24;

        alert(days)
});

you can use function something like this

function days() {
var a = new Date($("#datepicker_start").val()),
b = new Date($("#datepicker_end").val()),
c = 24*60*60*1000,
diffDays = Math.round(Math.abs((a - b)/(c)));
$("#totaldays").val(diffDays);
}

The function

function countDays(start, end) {
        return Math.abs(moment(start).diff(moment(end), 'd'));
    }

described in jquery.daterangepicker.js file.

Here is the correct way to return number of days between selection

    $(function() {
        $('input[name="daterange"]').daterangepicker({
             
            "autoApply": true,
            locale: {
                format: 'YYYY-MM-DD'
            },
            showDropdowns: true,

        }, function(start, end, label) { 
            var diff = end.diff(start, 'days'); // will return correct number
            alert("Number of days is " + diff); 
        });
    });

本文标签： javascriptHow do I get days count for selected dates by bootstrap date range pickerStack Overflow