Запустите функцию Jquery dateRangePicker при выборе опции выбора

0

Как выполнить эту функцию daterangepicker(), когда я выберу параметр из поля выбора:

В конечном итоге это то, что я хочу сделать:

  1. измените диапазон дат с помощью встроенной способности daterangepicker - выбирая параметры по умолчанию, такие как (30 дней, 7 дней, пользовательский диапазон и т.д.), это уже отлично работает)
  2. Если пользователь изменяет параметр выбора topSellingMaxAmount.

===== UPDATE (я удалил свой оригинальный тестовый код, он был слишком неясным) ==========

Вот мой фактический код:

<select id="topSellingMaxAmount" style="margin-top:7px;">
<option value="10">10</option>
<option value="25">25</option>
<option value="50" selected>50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
</select>

 function initDPicker(){
    $('#reportrange').daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Last 7 Days': [moment().subtract('days', 6), moment()],
                'Last 30 Days': [moment().subtract('days', 29), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
            },
            startDate: moment().subtract('days', 29),
            endDate: moment()
        },
        function(start, end) {
            $("#progressBar").show();
            var url = $("input#dashboardAjaxUrl").val();
            var startDate = start.format('M-D-YYYY');
            var endDate = end.format('M-D-YYYY');
            var topSellingMaxAmount = $("#topSellingMaxAmount").val();
            $.ajax({
                url: url,
                dataType: "json",
                type: "POST",
                data: {
                    startDate: startDate,
                    endDate: endDate,
                    maxAmount: topSellingMaxAmount
                },
                success: function( data ) {
                    var oTable = $("#datatableX").dataTable();
                    oTable.fnClearTable();
                    for(var i = 0; i <= data.iTotalRecords; i++) {
                        oTable.fnAddData([
                            data.aaData[i][0],
                            data.aaData[i][1],
                            data.aaData[i][2],
                            data.aaData[i][3],
                            data.aaData[i][4],
                            data.aaData[i][5]
                        ]);
                    }
                }, complete: function(){
                    $("#progressBar").hide();
                }
            });
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }
    );
}
$("#topSellingMaxAmount").on("change", function(){
    // something here to execute the datepicker to actually fire....
});
initDPicker();

Спасибо за вашу помощь!

  • 0
    Используйте на изменение jquery для избранных.
Теги:

1 ответ

0
$('#topSellingMaxAmount').on('change', function() {
 $('#reportrange').daterangepicker({options in here}); 
  alert( 'popup' ); 
});

Это вызовет всплывающее окно datepicker, когда будет сделан выбор.

  • 0
    Я чувствую, что вызов .daterangepicker({}) переинициализировал бы daterangepicker - что, возможно, не то, что он хочет. Я помню, как проводил какое-то тестирование в карме с этим компонентом, и чтобы инициировать взаимодействие, я отправлял триггер (например, $('#picker').trigger('click') . См. Ссылку
  • 0
    Да, я не совсем знаком с плагином, но я просто привел пример, отсюда и предупреждение. Должен ли я просто отредактировать это?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню