bootstrap daterangepicker не работает после вызова ajax

У меня есть ниже div, который будет отображать daterangepicker.

<div id="reportrange">
     <i class="fa fa-calendar"></i>                        
</div>

Здесь выше div помещен в частичное представление и вызывает частичное представление на странице индекса. На странице индекса динамически связываются данные с использованием вызова AJAX.

 $.ajax({
    url: "/Orders/OrderData",
    type: "POST",
    async: false,
    beforeSend: function () {
         $('#hdnPages').attr('data-status', false);
    },
    data: {
        'PageNo': PageNo, 'Keyword': Keyword, 'FromDate': FromDate, 'ToDate': ToDate,
        'FromPrice': FromPrice, 'ToPrice': ToPrice, 'Status': Status, 'Items': Items
    },
    success: function (res) { 
         $('#OrderList').append(res);
    }

После вызова Ajax я не могу открыть календарь при нажатии div. Я привязываю daterangepicker, используя приведенный ниже код в document.ready() в частичном представлении.

 $('#reportrange').daterangepicker({
        changeMonth: true,
        changeYear: true,
        singleDatePicker: false,
        showDropdowns: true,
        startDate: moment(),
        endDate: moment(),
        timePicker: true,
        timePickerSeconds: true,
        maxYear: sDate.getFullYear(),            
        locale: {
            format: 'MMM DD, YYYY hh:mm:ss A'
        },
        "opens": "right",
        "drops": "down"
    }, function (start, end) {
        $('#reportrange span').html(start.format('MMM DD, YYYY hh:mm:ss A') + ' - ' + end.format('MMM DD, YYYY hh:mm:ss A'));
    });

Может ли кто-нибудь помочь мне в этом вопросе.